官方的文档解释:

Mutation:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
Action: 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。

为何mutation不能包含异步操作?

  • 使用层面:代码更高效易维护, 逻辑清晰(规范,而不是逻辑的不允许);
  • 具体原因:为了让devtools 工具能够追踪数据变化

具体原因详解
每个mutation执行完成后都会对应到一个新的状态变更,这样devtools就可以打个快照存下来(每次状态的改变都会生产一个全新的 state 对象),然后就可以实现 “time-travel” 了。如果mutation支持异步操作,就没有办法知道状态是何时更新的,无法很好的进行状态的追踪,给调试带来困难。

vue-devtools 的时间旅行 - time travel
Vuex 借鉴 Flux 单向数据流思想,采用集中式统一管理保存状态。但是这些状态不会随时间改变而变化。为了使状态,可以被捕获、重播或重现。vue-devtools工具,可以帮助我们的 Vue 应用可以实现这种时间旅行!
每次状态的改变都会生产一个全新的 state 对象,当你想展现什么时间段的状态,只需要切换到那个时间段的 state 对象,所以vuex原则上只能通过mutation 并且非异步更改状态,否则无法实现state修改的记录保留或无法正确记录。

Logo

前往低代码交流专区

更多推荐