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 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
xml和web特殊字符
Apr 28 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
详解Vue-axios 设置请求头问题
Dec 06 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
JavaScript实现表单验证功能
Dec 09 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
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python strip lstrip rstrip使用方法
2008/09/06 Python
python集合用法实例分析
2015/05/30 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python手机号码归属地查询代码
2016/05/04 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
士力架广告词
2014/03/20 职场文书
2014年科技工作总结
2014/11/26 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
python非标准时间的转换
2021/07/25 Python
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js