Vuex unknown action type報錯問題及解決
更新時間：2023年02月12日 13:52:34 作者：wo_dxj
這篇文章主要介紹了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)文章
我們在做vue項目時,經(jīng)常會需要引入js,下面這篇文章主要給大家介紹了關(guān)于vue引用外部JS并調(diào)用JS文件中的方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
element-ui table組件如何使用render屬性的實現(xiàn)
這篇文章主要介紹了element-ui table組件如何使用render屬性的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家詳細介紹了Vue組件實現(xiàn)觸底判斷，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
本篇文章中主要介紹了Vue.js 中的 $watch使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
本文主要介紹，通過使用基于 vue技術(shù)棧的前端開發(fā)技術(shù)，在瀏覽器端調(diào)起攝像頭，并進行掃碼識別功能，對識別到的二維碼進行跳轉(zhuǎn)或其他操作處理，對vue瀏覽器掃碼功能的實現(xiàn)代碼感興趣的朋友一起看看吧2021-10-10
這篇文章主要介紹了SpringBoot+Vue3實現(xiàn)上傳文件功能，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了vue使用ECharts實現(xiàn)折線圖和餅圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue+Node.js+WebSocket實現(xiàn)即時通訊
本文主要介紹了Vue+Node.js+WebSocket實現(xiàn)即時通訊，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
VUE的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)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-08-08