vuex2.0.0爬坑记录 -- mutations的第一个参数state不能解构
今天在学习vuex的过程中,遇到了一个很困扰人的问题,最终利用vuex的状态快照工具logger解决了问题。
问题是这样的,我在子组件中使用了mapState()函数来将状态映射至子组件中,使子组件能够获取到状态,但是发现除了第一次能够得到状态的初始值外,后面无论状态如何变更,都获取不到更新的结果。
这是子组件mapState部分的代码:
computed: mapState({
user: ({user}) => (user),
session: ({sessions, currentSessionId}) => sessions.find(session => session.id === currentSessionId)
})
在这段代码中,在其它地方,我利用action去commit状态中的mutation,并且在action和mutation的函数内部都log出来了新的值,于是我认为状态发生了改变,按照这个思路,去找为什么子组件中没有响应状态的变化,调试许久,最终无果,回去翻看vuex的文档,发现插件部分,有一个vuex自带的Logger插件,配置方式如下:
import createLogger from 'vuex/dist/logger'
// 在实例中配置Logger
const store = new Vuex.Store({
...
plugins: [createLogger()]
})
之后利用这个Logger工具,发现虽然mutation被触发并且接受到了payload,但是状态并没有发生任何变化,于是找到了问题所在,是mutation部分的问题,我的mutaition一开始是这样写的:
const store = new Vuex.store({
...
mutations: {
some ({sessions}, payload) {
// 处理sessions
}
}
})
对比官方文档发现,官方文档指明state应该作为第一参数,我想当然地对state进行了参数解构,所以导致了这个错误,把第一参数改回state,在函数内部调用state最终问题得以解决,这里说明vuex2.0.0版本的mutations中定义的mutation,第一个参数是不能解构的,这里与定义action是不同的,action的第一参数context是可以解构的。特在此记录,加深印象,避免以后踩坑。
vuex2.0.0爬坑记录 -- mutations的第一个参数state不能解构的更多相关文章
- mybatis-generator 详细配置及使用,爬坑记录
mybatis-generator 详细配置及使用,爬坑记录 提示:如果不成功一定是项目路径和 数据库配置出问题,本篇基于 MySQL 8.0.13,调试没有问题. 如果失败,建议使用相同的项目结构, ...
- centos7安装Mysql爬坑记录
centos7安装Mysql爬坑记录 查看是否已安装 使用下列命令查看是否已经安装过mysql/mariadb/PostgreSQL 如果未安装,不返回任何结果(ECS的centos镜像默认未安装 ...
- elasticsearch 单节点搭建与爬坑记录
elasticsearch 单节点搭建与爬坑记录 prepare 虚拟机或者云服务器(这里用的是阿里云ECS) linux---centos7 安装完毕的jdk 相应的安装包(在https:/ ...
- 03、Swagger2和Springmvc整合详细记录(爬坑记录)
时间 内容 备注 2018年6月18日 基本使用 spirngmvc整合swagger2 开始之前这个系列博文基本是,在项目的使用中一些模块的内容记录,但是后期逐渐优化,不单单是整合内容. swagg ...
- Drone构建失败,一次drone依赖下载超时导致构建失败的爬坑记录
Once upon a time, birds were singing in the forest, and people were dancing under the trees, It's so ...
- PDF转图片部分公式字符丢失问题解决的爬坑记录
现象 PDF教材导出到系统中,由程序将PDF转为图片后合并成一张大图供前端标注,但是在标注数学和化学学科的时候且源文件是PDF的情况下出现公式部分字符丢失的情况,如下图 原件 转换后效果 WTF! 转 ...
- hadoop学习爬坑记录
1. Q: hdfs管理界面50070端口设置后,无法访问情况. A: 1)停止当前所有服务./stop-all.sh 2)在hdfs-site.xml中,更改开放端口的绑定IP: <prope ...
- 【转】Android M(6.0) 权限爬坑之旅
原文网址:https://yanlu.me/android-m6-0-permission-chasm/ 有一篇全面介绍Android M 运行时权限文章写的非常全面:Android M 新的运行时权 ...
- Android M(6.0) 权限爬坑之旅
坑一:用Android5.0编译的apk,在Android6.0上运行完全没有问题. 在Android6.0以上才需要在运行时请求权限,在旧Android版本上保留原有逻辑,安装时授予权限. 用旧版本 ...
随机推荐
- IOS 使用KBMMW 访问JAVA 服务
废话少说,如何使用KBMMW 做个过渡,使IOS 可以使用JAVA 的服务? 其实KBMMW 本身就要java service 的服务,但是为了把这个问题说清楚,我手工做一个例子. 首先,要使用JAV ...
- 初尝 JFinal 项目(二)
这里以Roles角色表修改功能做一个例子 RolesController /** * 角色管理控制类 * @author 御手洗红豆 */public class RolesController ex ...
- sql join用法学习
为了在两个或更多的表中获取结果,我们常常会用到join inner join(又叫join) out join包括left join,right join和full join(也就是left+righ ...
- chrome浏览器调用 ajax 提示net::ERR_INCOMPLETE_CHUNKED_ENCODING问题解决方案,以及 Response.Close 和 Response.End 的一些问题。
近段时间去了一家新公司任职,公司产品是一个网站,但是我发现它不兼容谷歌浏览器,用习惯了chrome的我简直是如鲠在喉.终于我抽出了时间,想纠正这个问题.F12一看,发现谷歌提示:net::ERR_IN ...
- IOS学习之路--OC的基础知识
1.项目经验 2.基础问题 3.指南认识 4.解决思路 ios开发三大块: 1.Oc基础 2.CocoaTouch框架 3.Xcode使用 -------------------- CocoaTouc ...
- Acadia Lab 6 轮盘游戏机
WRTnode 肯定不是亲生的... 果断转投Acadia —.— 不是国军不给力,奈何共军有高达 为啥不转树莓派?因为选做实验肯定有很多人用树莓派做...我抢不过他们,只能挑点冷门的蹭分_(:з」 ...
- 一年成为emacs高手
http://blog.csdn.net/redguardtoo/article/details/7222501
- jquery-1.3.2.js
Uncaught SyntaxError: Unexpected identifier
- Android菜鸟成长记14 -- AsnyTask
本篇随笔将讲解一下Android的多线程的知识,以及如何通过AsyncTask机制来实现线程之间的通信. 一.Android当中的多线程 在Android当中,当一个应用程序的组件启动的时候,并且没有 ...
- C# 以管理员身份运行WinForm程序
最近帮客户开发的WinForm客户端,部分在使用的过程中,会出现“系统文件找不到”的错误提示. 调试后,确定为程序在操作配置文件时,系统权限引起的错误,直接管理员权限运行就正常了. 考虑用户操作的便利 ...