Vuex中mutations与actions的区别详解


Posted in Javascript onMarch 01, 2018

区分 actions 和 mutations 并不是为了解决竞态问题,而是为了能用 devtools 追踪状态变化。

事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行。异步竞态怎么处理那是用户自己的事情。

vuex 真正限制你的只有 mutation 必须是同步的这一点(在 redux 里面就好像 reducer 必须同步返回下一个状态一样)。同步的意义在于这样每一个 mutation 执行完成后都可以对应到一个新的状态(和 reducer 一样),这样 devtools 就可以打个 snapshot 存下来,然后就可以随便 time-travel 了。如果你开着 devtool 调用一个异步的 action,你可以清楚地看到它所调用的 mutation 是何时被记录下来的,并且可以立刻查看它们对应的状态。

亲测:如果在mutation中做了异步操作,在dev-tools中会立即打印一个snapshot,而此时异步操作还没有执行完,此时的snapshot的信息是错误的。

而在action中做异步操作dev-tools会等等异步操作执行完才去打印mutation的一个snapshot,这样便于我们回查time-travel,查看在某个mutation里的变化。

以上这篇Vuex中mutations与actions的区别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
Vue 数据绑定的原理分析
Nov 16 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 #Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 #Javascript
详解Immutable及 React 中实践
Mar 01 #Javascript
解决VUEX兼容IE上的报错问题
Mar 01 #Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 #Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 #Javascript
Node.js readline模块与util模块的使用
Mar 01 #Javascript
You might like
php email邮箱正则
2008/10/08 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
jquery简单体验
2007/01/10 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
js DOM的学习笔记
2011/12/22 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
python使用zip将list转为json的方法
2018/12/31 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
学习十八大精神心得体会
2013/12/31 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
和睦家庭事迹
2014/05/14 职场文书
毕业横幅标语
2014/10/08 职场文书
2014年安全员工作总结
2014/11/13 职场文书
长城英文导游词
2015/01/30 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
护理专业自我评价
2015/03/11 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
Java详细解析==和equals的区别
2022/04/07 Java/Android