Vuex unknown action type報錯問題及解決
Vuex unknown action type報錯
在項目中使用到vuex,因為都是用的模塊開發(fā),目錄如下
模塊代碼
原來使用代碼
各種查找問題都不好使,完了再方法之前加上模塊名稱就ok了
vuex unknown action type:***
vuex 分模塊后使用mapActions調(diào)用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 }
頁面中調(diào)用時
import { mapActions } from 'vuex' computed: { ...mapActions([ 'setcachemid' ]), transfromPage(row, path) { this.setcachemid(row.monitorId) // [vuex] unknown action type: setcachemid } }
看dataManage.js并沒什么錯誤呀!
糾結(jié),
發(fā)現(xiàn)dispatch得使用這種才行
this.$store.dispatch('dataManage/setcachemid', row.monitorId)
看到這個是否明白了些什么!
最后調(diào)用代碼改改
import { mapActions } from 'vuex' computed: { ...mapActions({ 'cacc': 'dataManage/setcachemid' }), transfromPage(row, path) { this.cacc(row.monitorId) } }
ok問題解決,其實也是粗心開
index.js中模塊加載modules[moduleName] = value.default
就知道
為根據(jù)模塊名稱為每個modules 加了一個key ,
訪問當(dāng)然也要到改對應(yīng)的模塊名下去找了
【糾錯】
后來乘空閑去看了看源碼,感覺上面最后一步的操作時錯誤的
他是允許在多模塊時傳入namespace
參數(shù)來指定獲取那個模塊下的action 的
而
...mapActions({ 'cacc': 'dataManage/setcachemid' }),
之所以能成功,
關(guān)鍵在于這個normalizeMap
和state
的定義
在定義state 時將所有其子模塊都通過getNestedState
綁定到了state 中上,然在dispatch
時就可以通過對應(yīng)的val 找到
看這個源碼里的方法還是很繞的,還是不清楚,那么就搞個html理一理
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>理一理vue mapaction</title> </head> <body> <script> const mapActions = normalizeNamespace((namespace, actions) => { const res = {} normalizeMap(actions).forEach(({ key, val }) => { res[key] = function mappedAction (...args) { // 這里val 不為function 應(yīng)該會執(zhí)行dispatch.apply(this.$store, [val].concat(args)) // 這里就不模仿了,直接將concat值返回 //return typeof val === 'function' // ? val.apply(this, [dispatch].concat(args)) // : dispatch.apply(this.$store, [val].concat(args)) return [val].concat(args) } }) return res }) /** * @param {Object} fn * 此似高階函數(shù)用法 * 他返回了一個匿名函數(shù)給調(diào)用者 * 如 const mapActions 得到的其實就是這個里面return (namespace, map) => 這個匿名函數(shù) * 而在定義 const mapActions = normalizeNamespace((namespace, actions) => {}) 時又 * 傳入了一個匿名函數(shù)(namespace, actions) => {}作為參數(shù)給normalizeNamespace這個方法,所以在 * mapActions({ 'cacc': 'dataManage/setcachemid' }) 時; 其中執(zhí)行的就是這個函數(shù)return返回的(namespace, map) => {}這個匿名函數(shù) 然而這個匿名函數(shù)執(zhí)行時內(nèi)部又將mapActions定義是傳入的fn執(zhí)行并返回 */ function normalizeNamespace (fn) { return (namespace, map) => { if (typeof namespace !== 'string') { map = namespace namespace = '' } else if (namespace.charAt(namespace.length - 1) !== '/') { namespace += '/' } return fn(namespace, map) } } /** * Normalize the map * normalizeMap([1, 2, 3]) => [ { key: 1, val: 1 }, { key: 2, val: 2 }, { key: 3, val: 3 } ] * normalizeMap({a: 1, b: 2, c: 3}) => [ { key: 'a', val: 1 }, { key: 'b', val: 2 }, { key: 'c', val: 3 } ] * @param {Array|Object} map * @return {Object} */ function normalizeMap (map) { return Array.isArray(map) ? map.map(key => ({ key, val: key })) : Object.keys(map).map(key => ({ key, val: map[key] })) } // 測試一哈 console.log(mapActions) let resarr = mapActions({ 'cacc': 'dataManage/setcachemid' }) console.log(resarr) // 模仿執(zhí)行handler 執(zhí)行actions console.log(resarr.cacc()) </script> </body> </html>
F12查看打印如下:
好了轉(zhuǎn)半天應(yīng)該稍微理解一些了
而最終正確寫法應(yīng)該是
...mapActions('dataManage', { 'cacc': 'setcachemid' }),
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
element-ui table組件如何使用render屬性的實現(xiàn)
這篇文章主要介紹了element-ui table組件如何使用render屬性的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11Vue+Node.js+WebSocket實現(xiàn)即時通訊
本文主要介紹了Vue+Node.js+WebSocket實現(xiàn)即時通訊,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05VUE的history模式下除了index外其他路由404報錯解決辦法
在本篇文章里小編給大家分享的是關(guān)于VUE的history模式下除了index外其他路由404報錯解決辦法,對此有需要的朋友們可以學(xué)習(xí)下。2019-08-08利用Vue Native構(gòu)建移動應(yīng)用的全過程記錄
VueNative是一個使用JavaScript構(gòu)建跨平臺原生移動應(yīng)用程序的框架m這篇文章主要給大家介紹了關(guān)于如何利用Vue Native構(gòu)建移動應(yīng)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-08-08