[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'
}),
[vuex] unknown action type:***的更多相关文章
- vuex2 mapActions 报错 `unknown action type: xxxx`
export const setBreadCrumb = ({ dispatch }, data) => { dispatch('SET_BREADCRUMB', data) } 当调用的时候报 ...
- 解决vuex 状态管理mutations报错为:"[vuex] unknown mutation type: VIWE_NAV"
报错截图: 我的解决思路: 1.先检查gettes方向获取与actions提交是否畅通,同时专注检查code是否输错. 2.我查了别人多数是""在vuex中没有mutation,有 ...
- mint17.3挂载u盘出现错误:mount:unknown filesystem type 'exfat'
mint17.3挂载u盘出现错误:mount:unknown filesystem type 'exfat' 安装exfat-fuse: sudo apt-get install exfat-fuse
- mount: unknown filesystem type 'ntfs'
mount: unknown filesystem type 'ntfs' 问题描述 # mount –t ntfs /dev/sdc1 /mnt/usb2 mount: unknown filesy ...
- 在linux终端执行clear或top命令时出现:'xterm' unknown terminal type的错误
例如: [root@localhost phpmyadmin]# clear 'xterm': unknown terminal type. 解决办法: 1.临时办法,下次启动失效,需要重新执行 ex ...
- scp使用加密算法报错unknown cipher type
为了提高scp的传输速度指定了scp的加密算法为arcfour $ scp -c arcfour localFile userName@remoteIP:remoteFile 得到报错unknown ...
- [virsh] error: unknown OS type hvm解决办法
今天在linux服务器上编译安装升级了下qemu,升级命令如下: root@ubuntu:/opt/qemu-# ./configure --prefix=/usr/local/ --target-l ...
- CentOS提示::unknown filesystem type 'ntfs'.解决
在将硬盘插到Linux系统上,打开硬盘时一直提示:unknown filesystem type 'ntfs'.在尝试网上的方法也遇到了一些问题. 下面按照遇到的问题,按照正确的方式注意操作从而避免问 ...
- mount: unknown filesystem type 'LVM2_member'解决方案
系统启动到request_module: runaway loop modprobe binfmt-464c挂起 利用U盘系统,挂载硬盘出现:mount: unknown filesystem typ ...
- 'vt100': unknown terminal type.
在Linux终端执行clear或top命令时出现:vt100: unknown terminal type的错误 1.临时办法,下次启动失效,需要重新执行 执行以下命令 $ printenv | gr ...
随机推荐
- 树状分级框架UI实例
树状分级框架UI实例:(内容参考https://zhuanlan.zhihu.com/p/108485875) #coding:utf8 #!/usr/bin/env python #@author: ...
- [ARC152D] Halftree题解
很好的一道题,即使是我这种菜鸡也感到心潮澎湃. 直觉有余,证明不足.思路有余,推导不足. 无论是什么比赛,对拍都是最有效的查错方式. 本篇题解里的所有图片采用 graph_editor 制作. 题意简 ...
- v-model 和 .sync
v-model的本质是父子组件间的通讯,父组件给子组件传递一个value自定义属性和input自定义事件:子组件接收value 并触发自定义事件修改value 父组件中 <Child v-mod ...
- noopener, noreferrer 及 nofollow 的用法
<a> 标签通常会配合着使用 noopener, noreferrer 及 nofollow 这些属性, 它们的作用及用法如下. noopener 当给链接加上 target=" ...
- 每日复习——static , 饿汉式方法,懒汉式方法,以及单例设计模式
1.1.static 的使用 当我们编写一个类时,其实就是在描述其对象的属性和行为,而并没有产生实质上的对象,只有通过 new 关键字才会产生出对象,这时系统才会分配内存空间给对象,其方法才可以供外部 ...
- 各类电商平台批量获取商品信息 API 详细操作说明
前言获取商品信息可以更加快捷的查看商品的详请参数,同理批量获取商品信息的话就可以查看多个商品的信息参数,便于我们查看整个店铺的数据情况方便运营管理.具体操作如下:先获取一个key和secret,登入测 ...
- Chrome浏览器插件:CrxMouse(鼠标手势控制浏览器)
CrxMouse是一款谷歌浏览器插件,它可以通过手势来控制您的浏览器,在您的日常网络浏览中提高效率和速度. 插件介绍 CrxMouse是一个非常流行的谷歌浏览器插件,它允许您通过鼠标手势来控制您的浏览 ...
- python入门教程之十七进程、线程和协程
进程 要让Python程序实现多进程(multiprocessing),我们先了解操作系统的相关知识. Unix/Linux操作系统提供了一个fork()系统调用,它非常特殊.普通的函数调用,调用一次 ...
- 如何在2023年学习React
在2023年学习React并不是一件容易的事情.自2019年React Hooks发布以来,我们已经拥有了很多稳定性,但现在形势正在再次变化.而这次变化可能比使用React Hooks时更加不稳定.在 ...
- Golang一日一库之 日志库 zap
简介 在开发过程中 会使用到日志库去记录错误的日志,尤其是golang中 有无穷无尽的error 如果不记录,当你的代码出错,就无从排错了. zap 是开源的 Go 高性能日志库 主要有以下特点: 支 ...