Vuex中的Mutations的具体使用方法

最好提前在 store 中初始化好所有所需属性。
当需要在对象上添加新属性时，应该使用 Vue.set(obj, ‘newProp’, 123)，或者以新对象替换老对象。例如利用对象展开运算符可以写成：state.obj = {…state.obj, newProp: 123 }。

使用常量替代 Mutations 事件类型

使用常量替代 mutations 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutations 一目了然：

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

store.js 文件内容如下所示：

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
const store = new Vuex.Store({
 state: { ... },
 mutations: {
  // 使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
  [SOME_MUTATION] (state) {
   // mutate state
  }
 }
})

我们知道mutation 是通过store.commit(‘increment’)的方式调用的，其中increment方法是以字符串的形式代入。如果项目小，一个人开发的话倒还好，但是项目大了，编写代码的人多了，那就麻烦了，因为需要 commit 的方法一多，就会显得特别混乱，而且以字符串形式代入的话，一旦出了错，很难排查。

所以，在需要多人协作的大型项目中，最好还是用常量的形式来处理 mutation。

必须是同步函数

我们要记住的是，Mutation 必须是同步函数。

因为我们之所以要通过提交 mutation 的方式来改变状态数据，是因为我们想要更明确地追踪到状态的变化。如果是类似下面这样异步的话：

mutations: {
 someMutation (state) {
  api.callAsyncMethod(() => {
   state.count++
  })
 }
}

我们就不知道什么时候状态会发生改变，所以也就无法追踪了，这与 Mutation 的设计初心相悖，所以强制规定它必须是同步函数。

store.commit(‘increment’) // 任何由’increment’导致的状态变更都应该在此刻完成

到此这篇关于Vuex中的Mutations的具体使用方法的文章就介绍到这了,更多相关Vuex Mutations内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！