[vuex] unknown action type:***

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'
    }),