Vuex unknown action type报错问题及解决
目录
- Vuex unknown action type报错
- vuex unknown action type:***
- 总结
Vuex unknown action type报错
在项目中使用到vuex，因为都是用的模块开发，目录如下
模块代码
原来使用代码
各种查找问题都不好使，完了再方法之前加上模块名称就ok了
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'
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 时将所有其子模块都通过getNestedState绑定到了state 中上，然在dispatch时就可以通过对应的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 应该会执行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>
F12查看打印如下：
好了转半天应该稍微理解一些了
而最终正确写法应该是
...mapActions('dataManage', {
'cacc': 'setcachemid'
}),
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
浅谈Vuex注入Vue生命周期的过程
这篇文章是[前端词典]系列文章的第 13 篇文章,接下的 9 篇我会围绕着 Vue 展开,希望这 9 篇文章可以使大家加深对 Vue 的了解.当然这些文章的前提是默认你对 Vue 有一定的基础.如果一点基础都没有,建议先看官方文档. 第一篇文章我会结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会复杂很多. 为何使用 Vuex 使用 Vue 我们就不可避免的会遇
-
Vue常见报错整理大全(从此报错不害怕)
目录 示例1(文件名/路径发生错误) 示例2(标签不完整) 示例3(error 'xxx' is not defind) 示例4(unknown mutation type: changeA) 示例5(Attribute name cannot contain U+0022 ("), U+0027 ('), and U+003C (<).) 示例6(TypeError:Assignment to constant variable.) 示例7(error 'check' is assign
-
在使用vuex的时候出现commit未定义错误的解决
目录 使用vuex的时候出现commit未定义错误 出现的原因 错误展现过程 vuex模块化 commit()时报错 unknown mutation type:xxx 废话不多说直接上问题 总结 使用vuex的时候出现commit未定义错误 出现的原因 书写错误 当然,这个错误不是你单词书写错误 只要的原因是因为你的这个 方法里面没有 commit 这个方法 为什么没有?其实它是有的,只不过在 context 里面 你可能是直接写 commit(xxx)了 错误展现过程 首先我们先调用一下 <
-
Vuex unknown action type报错问题及解决
目录 Vuex unknown action type报错 vuex unknown action type:*** 总结 Vuex unknown action type报错 在项目中使用到vuex,因为都是用的模块开发,目录如下 模块代码 原来使用代码 各种查找问题都不好使,完了再方法之前加上模块名称就ok了 vuex unknown action type:*** vuex 分模块后使用mapActions调用action老是提示 [vuex] unknown action type:**
-
react创建项目启动报错的完美解决方法
目录 一.预备知识: 二.创建项目步骤: 三.启动项目时可能出现的报错: 四.Todolist项目相关库: 五.GitHub搜索案例相关库: 六.尚硅谷路由案例相关库: 七.UI库案例相关库: 八.redux相关库: 一.预备知识: npm (也可以用yarn,本文以npm为例) npm介绍 全称为Node Package Manager,是随同NodeJS一起安装的包管理工具. 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地
-
Kendo Grid editing 自定义验证报错提示的解决方法
Kendo UI是一个强大的框架用于快速HTML5 UI开发.基于最新的HTML5.CSS3和JavaScript标准. Kendo UI包含了开发现代JavaScript开发所需要的所有一切,包括:强大的数据源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控件. 今天开始就对项目里使用的kendo控件技巧做记录,有个别错误希望大家不吝指出,谢谢. 首先就是Grid控件编辑是,验证错误时弹出的提示居然是中文加字段名字,如下图.抓狂啊!!请问这样的低级的提示能拿得出手吗? 这样的提示
-
python安装dlib库报错问题及解决方法
问题描述 我是debain 系的linux系统没遇到这个问题,在centos系统遇到的 Collecting dlib Downloading http://mirrors.cloud.aliyuncs.com/pypi/packages/63/92/05c3b98636661cb80d190a5a777dd94effcc14c0f6893222e5ca81e74fbc/dlib-19.19.0.tar.gz (3.2MB) 100% |███████████████████████
-
Pandas之read_csv()读取文件跳过报错行的解决
读取文件时遇到和列数不对应的行,此时会报错.若报错行可以忽略,则添加以下参数: 样式: pandas.read_csv(***,error_bad_lines=False) pandas.read_csv(filePath) 方法来读取csv文件时,可能会出现这种错误: ParserError:Error tokenizing data.C error:Expected 2 fields in line 407,saw 3. 是指在csv文件的第407行数据,期待2个字段,但在第407行实际发现
-
MySQL5.7 group by新特性报错1055的解决办法
项目中本来使用的是mysql5.6进行开发,切换到5.7之后,突然发现原来的一些sql运行都报错,错误编码1055,错误信息和sql_mode中的"only_full_group_by"有关,到网上看了原因,说是mysql5.7中only_full_group_by这个模式是默认开启的 解决办法大致有两种: 一:在sql查询语句中不需要group by的字段上使用any_value()函数 当然,这种对于已经开发了不少功能的项目不太合适,毕竟要把原来的sql都给修改一遍 二:修改my.
-
Oracle+Mybatis的foreach insert批量插入报错的快速解决办法
最近做一个批量导入的需求,将多条记录批量插入数据库中. 解决思路:在程序中封装一个List集合对象,然后把该集合中的实体插入到数据库中,因为项目使用了MyBatis,所以打算使用MyBatis的foreach功能进行批量插入.期间遇到了"SQL 命令未正确结束 "的错误,最终解决,记录下来供以后查阅和学习. 首先,在网上参考了有关Mybatis的foreach insert的资料,具体如下: foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach
-
nginx上传文件大小报错500的解决办法
nginx上传文件大小报错500的解决办法 采用nginx作反向代理,出现了一个诡异的问题,小文件可以提交,大文件会报500内部错误.这个是什么原因导致的呢? 查wiki可知,上传文件大小相关的有三个配置 client_body_buffer_size 配置请求体缓存区大小, 不配的话, client_body_temp_path 设置临时文件存放路径.只有当上传的请求体超出缓存区大小时,才会写到临时文件中 client_max_body_size 设置上传文件的最大值 所以查出来,问题出现的原
-
Yii使用DeleteAll连表删除出现报错问题的解决方法
本文实例讲述了Yii使用DeleteAll连表删除出现报错问题的解决方法.分享给大家供大家参考,具体如下: 删除数据的时候,经常会遇到连联判断删除数据的条件,今天用Yii 的CDbCriteria生成关连条件.批量删除的时候数据库报错. 页面代码为: $criteria=new CDbCriteria; $criteria->join = ' LEFT JOIN {{positions}} p ON p.zpo_id=t.zpo_id '; $criteria->addCondition(&q
-
PHP 500报错的快速解决方法
1 先看nginx error.log 指定的错误日记文件路径 找到这个日记文件看 里面信息 2 再看 php-fpm.conf 里面指定的PHP错误日记的路径 具体如下 php_flag[display_errors] = off php_admin_flag[log_errors] = on php_admin_value[error_log] = /data/logs/fpm-php.log 以上就是小编为大家带来的PHP 500报错的快速解决方法全部内容了,希望大家多多支持我们~