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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
详解vue-cli 脚手架 安装
Apr 16 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 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
长波知识介绍
2021/03/01 无线电
第1次亲密接触PHP5(1)
2006/10/09 PHP
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
python中使用%与.format格式化文本方法解析
2017/12/27 Python
详解python实现线程安全的单例模式
2018/03/05 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
珍惜时间演讲稿
2014/05/14 职场文书
企业精神口号
2014/06/11 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
贷款委托书怎么写
2014/08/02 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书