Vuex unknown action type報(bào)錯(cuò)問(wèn)題及解決
更新時(shí)間：2023年02月12日 13:52:34 作者：wo_dxj
這篇文章主要介紹了Vuex unknown action type報(bào)錯(cuò)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Vuex unknown action type報(bào)錯(cuò)
在項(xiàng)目中使用到vuex，因?yàn)槎际怯玫哪K開(kāi)發(fā)，目錄如下
模塊代碼
原來(lái)使用代碼
各種查找問(wèn)題都不好使，完了再方法之前加上模塊名稱(chēng)就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
}
頁(yè)面中調(diào)用時(shí)
import { mapActions } from 'vuex'
computed: {
...mapActions([
'setcachemid'
]),
transfromPage(row, path) {
this.setcachemid(row.monitorId) // [vuex] unknown action type: setcachemid
}
}
看dataManage.js并沒(méi)什么錯(cuò)誤呀！
糾結(jié)，
發(fā)現(xiàn)dispatch得使用這種才行
this.$store.dispatch('dataManage/setcachemid', row.monitorId)
看到這個(gè)是否明白了些什么！
最后調(diào)用代碼改改
import { mapActions } from 'vuex'
computed: {
...mapActions({
'cacc': 'dataManage/setcachemid'
}),
transfromPage(row, path) {
this.cacc(row.monitorId)
}
}
ok問(wèn)題解決，其實(shí)也是粗心開(kāi)
index.js中模塊加載modules[moduleName] = value.default 就知道
為根據(jù)模塊名稱(chēng)為每個(gè)modules 加了一個(gè)key ,
訪(fǎng)問(wèn)當(dāng)然也要到改對(duì)應(yīng)的模塊名下去找了
【糾錯(cuò)】
后來(lái)乘空閑去看了看源碼，感覺(jué)上面最后一步的操作時(shí)錯(cuò)誤的
他是允許在多模塊時(shí)傳入namespace參數(shù)來(lái)指定獲取那個(gè)模塊下的action 的
而
...mapActions({
'cacc': 'dataManage/setcachemid'
}),
之所以能成功，
關(guān)鍵在于這個(gè)normalizeMap
和state的定義
在定義state 時(shí)將所有其子模塊都通過(guò)getNestedState綁定到了state 中上，然在dispatch時(shí)就可以通過(guò)對(duì)應(yīng)的val 找到
看這個(gè)源碼里的方法還是很繞的，還是不清楚，那么就搞個(gè)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)該會(huì)執(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ù)用法
* 他返回了一個(gè)匿名函數(shù)給調(diào)用者
* 如 const mapActions 得到的其實(shí)就是這個(gè)里面return (namespace, map) => 這個(gè)匿名函數(shù)
* 而在定義 const mapActions = normalizeNamespace((namespace, actions) => {}) 時(shí)又
* 傳入了一個(gè)匿名函數(shù)(namespace, actions) => {}作為參數(shù)給normalizeNamespace這個(gè)方法，所以在
* mapActions({
'cacc': 'dataManage/setcachemid'
})
時(shí)； 其中執(zhí)行的就是這個(gè)函數(shù)return返回的(namespace, map) => {}這個(gè)匿名函數(shù)
然而這個(gè)匿名函數(shù)執(zhí)行時(shí)內(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] }))
}
// 測(cè)試一哈
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)該稍微理解一些了
而最終正確寫(xiě)法應(yīng)該是
...mapActions('dataManage', {
'cacc': 'setcachemid'
}),
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目引發(fā)的「過(guò)濾器」使用教程
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目引發(fā)的「過(guò)濾器」使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue中引用JSON數(shù)據(jù)的方法小結(jié)
在現(xiàn)代Web開(kāi)發(fā)中,JSON是一種輕量級(jí)的數(shù)據(jù)交換格式,易于人閱讀和編寫(xiě),同時(shí)也易于機(jī)器解析和生成,Vue.js作為一個(gè)流行的前端框架,支持多種方式引入和處理JSON數(shù)據(jù),本文將詳細(xì)介紹幾種在Vue中引用JSON數(shù)據(jù)的方法,需要的朋友可以參考下2024-10-10
vue實(shí)現(xiàn)數(shù)字+英文字母組合鍵盤(pán)功能
這篇文章主要介紹了vue實(shí)現(xiàn)數(shù)字+英文字母組合鍵盤(pán)功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
隨著前端的項(xiàng)目的越來(lái)越復(fù)雜,出現(xiàn)了一堆概念來(lái)降低開(kāi)發(fā)的復(fù)雜性,單向數(shù)據(jù)流就是其中一個(gè),下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
Vue中避免濫用this去讀取data中數(shù)據(jù)
這篇文章主要介紹了Vue中避免濫用this去讀取data中數(shù)據(jù)的的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)無(wú)限加載瀑布流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。這篇文章主要介紹了vue.js 中的組件，需要的朋友參考下2018-02-02
Vue組件實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫(huà)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
今天小編就為大家分享一篇vue中子組件的methods中獲取到props中的值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
el-select如何獲取當(dāng)前選中的對(duì)象所有(item)數(shù)據(jù)
在開(kāi)發(fā)業(yè)務(wù)場(chǎng)景中我們通常遇到一些奇怪的需求,下面這篇文章主要給大家介紹了關(guān)于el-select如何獲取當(dāng)前選中的對(duì)象所有(item)數(shù)據(jù)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11