問(wèn)題描述

之前對(duì)著vuex官方的例子抄了一遍以后，打算自己做個(gè)帶完整html，css的demo，帶更多完整的功能，然后基本都完成了，開(kāi)始測(cè)試的時(shí)候就遇到了后臺(tái)報(bào)錯(cuò)“this.$store.dispatch is not a function”我搞了一下午都沒(méi)弄好，對(duì)著例子比對(duì)半天都沒(méi)看出問(wèn)題，使用vue官方的chrome調(diào)試器知道state和getters是有引入所以state，就是actions沒(méi)獲得我模擬出來(lái)的數(shù)據(jù)

相關(guān)代碼如下

//Product.vueimport { mapGetters, mapActions } from ’vuex’export default {...created () {this.$store.dispatch(’getAllDetails’) }}

//store/modules/product.jsimport 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-typesexport const PRODUCT_DETAILS = ’PRODUCT_DETAILS’

//shop.jsconst _details = [{ iPhone6S: { name: ’Apple/蘋果 iPhone 6S’, desc: ’3D Touch、1200萬(wàn)像素照片、4k視頻，強(qiáng)大功能于一身。’, 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) }}

如果大佬們有時(shí)間，或者覺(jué)得我截取的片段不能說(shuō)明問(wèn)題，可以到github中下載完整版本調(diào)試，先謝謝大佬們了。

問(wèn)題解答

修改main.js中

import * as store from ’./store’

為import store from ’./store’

//Product.vueimport { mapGetters, mapActions } from ’vuex’export default {...created () {this.$store.dispatch(’getAllDetails’) }}

要先在你這個(gè)代碼里面引入store,import store from ’./store’