我正在尝试使用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
中有一组对象,但是我所有的吸气剂都是空的。