Действие Vuex не извлекает данные из API - PullRequest
Новая
       11

Действие Vuex не извлекает данные из API

0 голосов
/ 25 марта 2019

Я пытаюсь получить некоторые данные из локального API, используя json-server , но мои действия 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 моего компонента: 

<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, но все мои получатели пусты.

...