vuex 中的mutations

大家好，欢迎来到IT知识分享网。

在vuex中想改变state中的状态往往通过一个叫做mutations的东西进行操作
官方文档如下
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = createStore({ 
   
  state: { 
   
    count: 1
  },
  mutations: { 
   
    increment (state) { 
   
      // 变更状态
      state.count++
    }
  }
})

store.commit('increment')

个人理解 vuex中的mutation 类似于组件中的methods方法，通常我们改变组件中的data中的值也是通过methods，实际工作中有采用以下这种方式使用mutation，
1.定义mutations的文件夹，用来存储mutation处理函数，将mutations暴露出去
2.在store文件夹下的index.js中引入mutations 如下

```javascript
import mutations from './mutations'

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
})

3.在我们放置mutation函数 的文件中定义我们需要的mutation ，在定义时实际工作中使用常量替代 mutation 事件类型，官方文档如下：
使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：

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

// store.js
import { 
    createStore } from 'vuex'
import { 
    SOME_MUTATION } from './mutation-types'

const store = createStore({ 
   
  state: { 
    ... },
  mutations: { 
   
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) { 
   
      // 修改 state
    }
  }
})

在实际工作中引入’./mutation-types’时，会采用import SOME_MUTATION from ‘./mutation-types’ 而不使用解构赋值，使用 [SOME_MUTATION.SOME_MUTATION] 意为 [ 引入对象. 定义的事件类型 ]

在组件中提交mutation
官方文档如下
你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

import { 
    mapMutations } from 'vuex'

export default { 
   
  // ...
  methods: { 
   
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({ 
   
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

…mapMutations({

add: ‘increment’ // 将 this.add() 映射为 this.$store.commit('increment')
})中 key为暴露出来的方法名 （为上文暴露出来的SOME_MUTATION），值为mutations中的mutation
注：mutation函数必须是同步函数，异步要使用action