Mutation常量类型 – 概念

Mutation常量类型 – 概念

我们来考虑下面的问题:

在mutation中, 我们定义了很多事件类型(也就是其中的方法名称).

当我们的项目增大时, Vuex管理的状态越来越多, 需要更新状态的情况越来越多, 那么意味着Mutation中的方法越来越多.

方法过多, 使用者需要花费大量的经历去记住这些方法, 甚至是多个文件间来回切换, 查看方法名称, 甚至如果不是复制的时候, 可能还会出现写错的情况.

如何避免上述的问题呢?

在各种Flux实现中, 一种很常见的方案就是使用常量替代Mutation事件的类型.

我们可以将这些常量放在一个单独的文件中, 方便管理以及让整个app所有的事件类型一目了然.

具体怎么做呢?

我们可以创建一个文件: mutation-types.js, 并且在其中定义我们的常量.

定义常量时, 我们可以使用ES2015中的风格, 使用一个常量来作为函数的名称.

Mutation常量类型 – 代码

Mutation同步函数

通常情况下, Vuex要求我们Mutation中的方法必须是同步方法.

主要的原因是当我们使用devtools时, 可以devtools可以帮助我们捕捉mutation的快照.

但是如果是异步操作, 那么devtools将不能很好的追踪这个操作什么时候会被完成.

比如我们之前的代码, 当执行更新时, devtools中会有如下信息: 图1

但是, 如果Vuex中的代码, 我们使用了异步函数: 图2

你会发现state中的info数据一直没有被改变, 因为他无法追踪到.

So, 通常情况下, 不要再mutation中进行异步的操作