今天在学习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不能解构的更多相关文章

  1. mybatis-generator 详细配置及使用,爬坑记录

    mybatis-generator 详细配置及使用,爬坑记录 提示:如果不成功一定是项目路径和 数据库配置出问题,本篇基于 MySQL 8.0.13,调试没有问题. 如果失败,建议使用相同的项目结构, ...

  2. centos7安装Mysql爬坑记录

    centos7安装Mysql爬坑记录   查看是否已安装 使用下列命令查看是否已经安装过mysql/mariadb/PostgreSQL 如果未安装,不返回任何结果(ECS的centos镜像默认未安装 ...

  3. elasticsearch 单节点搭建与爬坑记录

    elasticsearch 单节点搭建与爬坑记录   prepare   虚拟机或者云服务器(这里用的是阿里云ECS) linux---centos7 安装完毕的jdk 相应的安装包(在https:/ ...

  4. 03、Swagger2和Springmvc整合详细记录(爬坑记录)

    时间 内容 备注 2018年6月18日 基本使用 spirngmvc整合swagger2 开始之前这个系列博文基本是,在项目的使用中一些模块的内容记录,但是后期逐渐优化,不单单是整合内容. swagg ...

  5. Drone构建失败,一次drone依赖下载超时导致构建失败的爬坑记录

    Once upon a time, birds were singing in the forest, and people were dancing under the trees, It's so ...

  6. PDF转图片部分公式字符丢失问题解决的爬坑记录

    现象 PDF教材导出到系统中,由程序将PDF转为图片后合并成一张大图供前端标注,但是在标注数学和化学学科的时候且源文件是PDF的情况下出现公式部分字符丢失的情况,如下图 原件 转换后效果 WTF! 转 ...

  7. hadoop学习爬坑记录

    1. Q: hdfs管理界面50070端口设置后,无法访问情况. A: 1)停止当前所有服务./stop-all.sh 2)在hdfs-site.xml中,更改开放端口的绑定IP: <prope ...

  8. 【转】Android M(6.0) 权限爬坑之旅

    原文网址:https://yanlu.me/android-m6-0-permission-chasm/ 有一篇全面介绍Android M 运行时权限文章写的非常全面:Android M 新的运行时权 ...

  9. Android M(6.0) 权限爬坑之旅

    坑一:用Android5.0编译的apk,在Android6.0上运行完全没有问题. 在Android6.0以上才需要在运行时请求权限,在旧Android版本上保留原有逻辑,安装时授予权限. 用旧版本 ...

随机推荐

  1. mysql快速导入大量数据问题

    今天需要把将近存有一千万条记录的*.sql导入到mysql中.使用navicate导入,在导入100万条之后速度就明显变慢了, 导入五百万条数据的时候用了14个小时,且后面的数据导入的越来越慢. 后来 ...

  2. sassCore

    core文件 setting 负责基础变量的文件,如常用的颜色,字体等变量. css3 负责css3属性前缀的文件.参考了bourbon,然后进行一系列的扩展及优化,以使解析出来的代码更加合理. me ...

  3. 微信支付之JSAPI开发-第二篇:业务流程详解与方案设计

    微信支付流程 流程: 上图的网址为:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_4 如上图所示,微信网页支付的具体流程大致分为 ...

  4. Could not find the following Boost libraries: boost_python3

    安装Boost.NumPy时报错: CMake Error at /usr/share/cmake/Modules/FindBoost.cmake:1794 (message): Unable to ...

  5. XidianOJ 1044 炸金花

    题目描述 炸金花是一个风靡全球的扑克游戏,不少人因为这个游戏发了家,而更多的人则输得倾家荡产.为了帮助赌徒们戒掉它,现在决定派你去写一个程序,帮助赌徒们更好的认识这个游戏. 炸金花在这里被简化成这样一 ...

  6. 9.7 js进阶总结2

    数组元素添加 将一个或多个新元素添加到数组结尾,并返回数组新长度 var week_len = week.push(‘星期四’,‘星期五’); 将一个或多个新元素添加到数组开始,数组中的元素自动后移, ...

  7. 虚拟机virtualBox设置共享文件后,linux配置

    1.在/mnt下创建共享目录 mkdir /mnt/share 2.关联外部目录 mount -t vboxsf 共享文件夹名 /mnt/share/ 如:mount -t vboxsf BaiduS ...

  8. div+css的第一个布局

    ---恢复内容开始--- 这个东西说难也不难,但也要详细思虑一番: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  9. Python导入模块出现“no module named **”可能是这样的原因

    因为Python中其他文件中海油和这些模块一样的取名,这个时候Python就找不到到底是哪个文件了,所以只需要将其中一个文件的名字修改成不一样的就可以了.

  10. Spring scope

    scope用来声明IOC容器中的对象应该处的限定场景或者说该对象的存活空间,即在IOC容器在 对象进入相应的scope之前,生成并装配这些对象,在该对象不再处于这些scope的限定之后,容器通常会销毁 ...