vuex 分模块后使用mapActions调用action老是提示 [vuex] unknown action type:*** 异常
目录
index.js是这样的
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
dataManage.js 模块定义是这样的
const state = {
mId: '',
basicId: ''
}
const mutations = {
SET_MID(state, mId) {
state.mId = mId
},
SET_BASIC_ID(state, basicId) {
state.basicId = basicId
}
}
const actions = {
setcachemid({ commit }, mId) {
console.log(mId)
commit('SET_MID', mId)
},
setBasicId({ commit }, basicId) {
commit('SET_BASIC_ID', basicId)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
页面中调用时
import { mapActions } from 'vuex'
methods: {
...mapActions([
'setcachemid'
]),
transfromPage(row, path) {
this.setcachemid(row.monitorId) // [vuex] unknown action type: setcachemid
}
}
看dataManage.js并没什么错误呀！
纠结，
发现dispatch得使用这种才行
this.$store.dispatch('dataManage/setcachemid', row.monitorId)
看到这个是否明白了些什么！
最后调用代码改改
import { mapActions } from 'vuex'
methods: {
...mapActions({
'cacc': 'dataManage/setcachemid'
}),
transfromPage(row, path) {
this.cacc(row.monitorId)
}
}
ok问题解决，其实也是粗心开
index.js中模块加载modules[moduleName] = value.default 就知道
为根据模块名称为每个modules 加了一个key ,
访问当然也要到改对应的模块名下去找了
【纠错】
后来乘空闲去看了看源码，感觉上面最后一步的操作时错误的
他是允许在多模块时传入namespace参数来指定获取那个模块下的action 的
而
...mapActions({
'cacc': 'dataManage/setcachemid'
}),
之所以能成功，
关键在于这个normalizeMap
和state的定义
在定义state 时将所有其子模块都通过getNestedState绑定到了state 中上
，然在dispatch时就可以通过对应的val 找到
最终正确写法应该是
...mapActions('dataManage', {
'cacc': 'setcachemid'
}),
