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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
jquery tab标签页的制作
May 10 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 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网站在线人数统计
2008/04/09 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
Python代码的打包与发布详解
2014/07/30 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
在Python中增加和插入元素的示例
2018/11/01 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
高校毕业生自我鉴定
2013/10/27 职场文书
公司承诺书范文
2014/05/19 职场文书
家庭教育的心得体会
2014/09/01 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
六查六看心得体会
2014/10/14 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫
Pandas数据结构之Series的使用
2022/03/31 Python