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