之前對著vuex官方的例子抄了一遍以后,打算自己做個帶完整html,css的demo,帶更多完整的功能,然后基本都完成了,開始測試的時候就遇到了后臺報錯“this.$store.dispatch is not a function”
我搞了一下午都沒弄好,對著例子比對半天都沒看出問題,使用vue官方的chrome調(diào)試器知道state和getters是有引入所以state,就是actions沒獲得我模擬出來的數(shù)據(jù)
相關(guān)代碼如下
//Product.vue
import { mapGetters, mapActions } from 'vuex'
export default {
...
created () {
this.$store.dispatch('getAllDetails')
}
}
//store/modules/product.js
import shop from '../../api/shop'
import * as types from '../mutation-types'
const state = { all:[] }
const actions = {
getAllDetails({ commit }) {
shop.getDetails( details => {
commit(types.PRODUCT_DETAILS, { details })
})
}
}
const mutations = {
[types.PRODUCT_DETAILS] (state, { details }) {
state.all = details
}
}
export default {
state,
getters,
actions,
mutations
}
//store/mutations-types
export const PRODUCT_DETAILS = 'PRODUCT_DETAILS'
//shop.js
const _details = [{
iPhone6S: {
name: 'Apple/蘋果 iPhone 6S',
desc: '3D Touch、1200萬像素照片、4k視頻,強大功能于一身。',
price: '5288 - 6888',
style: {
'銀色': 'http://o8yu724qs.bkt.clouddn.com/iphone6s-silver-select-2015.png',
'深空灰色': 'http://o8yu724qs.bkt.clouddn.com/iphone6s-gray-select-2015.png',
'金色': 'http://o8yu724qs.bkt.clouddn.com/iphone6s-gold-select-2015.png',
'玫瑰金色': 'http://o8yu724qs.bkt.clouddn.com/iphone6s-rosegold-select-2015.png'
},
activeStyleUrl: 'http://o8yu724qs.bkt.clouddn.com/iphone6s-silver-select-2015.png',
size: {
'16GB': 5288,
'64GB': 6088,
'128GB': 6888
}
}
}]
export default {
getDetails (cb) {
console.log(cb)
return cb(_details)
}
}
如果大佬們有時間,或者覺得我截取的片段不能說明問題,可以到github中下載完整版本調(diào)試,先謝謝大佬們了。
修改main.js中
import * as store from './store'
為import store from './store'
//Product.vue
import { mapGetters, mapActions } from 'vuex'
export default {
...
created () {
this.$store.dispatch('getAllDetails')
}
}
要先在你這個代碼里面引入store,import store from './store'