Vuex操作无法从API获取数据

时间:2019-03-25 00:12:37

标签: laravel vue.js store vuex

我正在尝试使用json-server从本地API获取一些数据,但是我的Vuex操作无法获取数据。

测试服务器未显示任何GET请求,而我的vue应用无法呈现任何内容。

运行npm run dev时,它将编译我的所有资产而没有错误,但是如果我检查vue-dev-tools,它将状态显示为空数组。

我不知道我在做什么错。

产品模块:

products.js

import axios from 'axios'

const api_home = 'http://localhost:8069/'

const state = {
    products: []
}

const getters = {
    getAllProducts: (state) => {
        return state.products
    },
    getFeaturedProducts: (state) => {
        return state.products.featured
    },
    getDealsProducts: (state) => {
        return state.products.deals
    },
    getQueryProducts: (state) => {
        return state.products.query
    }
}

const actions = {
    async fetchProducts({ commit }) {
        const response = await axios.get(`${api_home}products/`)
        console.log(response.data)
    }
}

const mutations = {
    setProducts: (state, list) => {
        state.products = list
    }
}

export default {
    state,
    getters,
    actions,
    mutations
}

store / index.js

import Vue from 'vue'
import Vuex from 'vuex'

import products from './modules/products'
import ads from './modules/ads'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        products,
        ads
    }
})

这是我组件的脚本部分:

<script>
/* Vuex import */
import { mapGetters, mapActions } from 'vuex'
/* Swiper */
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
/* Componentes internos */
import baseSearchComponent from '../base/baseSearchComponent'

export default {
    name: 'page-home-component',
    components: {
        swiper,
        swiperSlide,
        baseSearchComponent
    },
    data() {
        return {
            swiperOption: {
            }
        }
    },
    methods: mapActions([
            'fetchProducts',
            'fetchAds'
        ]),
    computed: mapGetters([
            'getFeaturedProducts',
            'getDealsProducts',
            'getBanners'
        ]),
    created() {
        this.fetchProducts,
        this.fetchAds
    },
}
</script>

我期望state.products中有一组对象,但是我所有的吸气剂都是空的。

0 个答案:

没有答案