Vuex中mutations与actions的区别详解

更新时间：2018年03月01日 10:55:35 作者：风之旅人丶

下面小编就为大家分享一篇Vuex中mutations与actions的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

区分 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的区别详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue用ant design中table表格,点击某行时触发的事件操作
这篇文章主要介绍了vue用ant design中table表格,点击某行时触发的事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
webpack中的optimization配置示例详解
这篇文章主要介绍了webpack中的optimization配置详解,主要就是根据不同的策略来分割打包出来的bundle,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-02-02
vue实现无缝滚动的示例详解
这篇文章主要为大家详细介绍了vue非组件如何实现列表的无缝滚动效果,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下
2023-09-09
vue实现左右点击滚动效果
这篇文章主要为大家详细介绍了vue实现左右点击滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
解决elementUI中el-tree树形结构中节点过滤的问题
这篇文章主要介绍了解决elementUI中el-tree树形结构中节点过滤的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue查询数据并通过bootstarp table渲染数据
这篇文章主要为大家介绍了Vue查询数据并通过bootstarp table渲染数据，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
vue + Electron 制作桌面应用的示例代码
这篇文章主要介绍了vue + Electron 制作桌面应用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-11-11
基于iview-admin实现动态路由的示例代码
这篇文章主要介绍了基于iview-admin实现动态路由的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
Vue项目从webpack3.x升级webpack4不完全指南
前段时间，泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本，现在才拉出来记录一下，已备忘之用，也和大家分享一下,需要的朋友可以参考下
2019-04-04
Vue如何通过浏览器控制台查看全局data值
在写vue项目时想到一个问题,项目里面的文件都是一个个的组件,如何在控制台中修改,查看组件data里的值呢,下面这篇文章主要给大家介绍了关于Vue如何通过浏览器控制台查看全局data值的相关资料,需要的朋友可以参考下
2023-04-04