Vuex unknown action ty PE 报错
在项目中使用到vuex，因为都是用的模块开发，目录如下
模块代码
原来 使用代码
各种查找问题都不好使，完了再方法之前加上模块名称就ok了
vuex unknown action type:***
vuex 分模块后使 用M apActions调用action老是提示 [vuex] unknown action type:*** 异常
目录
index.js 是这样的
import Vue From 'vue'
import Vuex f rom 'vuex'
import getters from './getters'
Vue.use (Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys(). red uce((modules, modulePath) => {
const moduleN am e = 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 stat e = {
mId: '',
basicId: ''
}
const mutations = {
SET_MID(state, mId) {
state.mId = mId
},
SET_BASIC_ID(state, basicId) {
state.basicId = basicId
}
}
const actions = {
setcachemid({ comm IT }, mId) {
console. LOG (mId)
commit('SET_MID', mId)
},
setBasicId({ commit }, basicId) {
commit('SET_BASIC_ID', basicId)
}
}
e xp ort default {
names paced: true,
state,
mutations,
actions
}
页面中调用时
import { mapActions } from 'vuex'
computed: {
.. .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'
computed: {
...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 时将所有其子模块都通过 getNeste dstat e 绑定到了state 中上，然在 dispatch 时就可以通过对应的val 找到
看这个源码里的方法还是很绕的，还是不清楚，那么就搞个ht ML 理一理
<!DOCTYPE html>
<html>
<head>
< ;m eta charset="utf-8">
<title>理一理vue mapaction</title>
</head>
<body>
<script>
const mapActions = normalizeNamespace((namespace, actions) => {
const res = {}
normalizeMap(actions).for each (({ key, val }) => {
res[key] = function mappedAction (... arg s) {
// 这里val 不为function 应该 会执行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
* 此似高阶函数用法
* 他返回了一个 匿名函数 给调用者
* 如 const mapActions 得到的其实就是这个里面return (namespace, map) => 这个匿名函数
* 而在定义 const mapActions = normalizeNamespace((namespace, actions) => {}) 时又
* 传入了一个匿名函数(namespace, actions) => {}作为参数给normalizeNamespace这个方法，所以在
* mapActions({
'cacc': 'dataManage/setcachemid'
})
时； 其中执行的就是这个函数return返回的(namespace, map) => {}这个匿名函数
然而这个匿名函数执行时内部又将mapActions定义是传入的fn执行并返回
*/
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)
// 模仿执行handler 执行actions
console.log(resarr.cacc())
</script>
</body>
</html>
F1 2查看打印如下：
好了转 半 天应该稍微理解一些了
而最终正确写法应该是
...mapActions('dataManage', {
'cacc': 'setcachemid'
}),
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的 文章 : 在使用vuex的时候出现commit未定义错误的解决 Vue常见报错整理大全(从此报错不害怕) 浅谈Vuex注入Vue生命周期的过程
总结
以上是 为你收集整理的 Vuex unknown action type报错问题及解决 全部内容，希望文章能够帮你解决 Vuex unknown action type报错问题及解决 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Vuex unknown action type报错问题及解决的详细内容...