Vuex中的mutations属性

一、什么是mutations

Mutation的中文翻译是“突变”，在Vuex中，它是store对象的一个属性，mutations被用于更新store中所存放的所有状态。关于mutations，有以下几点需要注意

• 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
• 通过this.$store.state来直接修改store中的状态也是有效的，但这种方式的修改无法被Vue的调试工具所记录，因此不推荐使用这种方法
• 通常情况下，Vuex要求我们的mutation中的方法必须是同步方法，这是由于mutation对异步方法的提交无法被Vue调试工具所记录

二、如何使用mutations

每个 mutation 都有一个字符串的事件类型 (type)，等同于我们在mutations中定义的方法名。和一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，该回调函数可以有二个参数，但第一个参数一定对应的是state对象。

先上代码
// — index.js —

const store = new Vuex.Store({
    state: {
        Rome: ['TUR','RUS'] // 这是要被修改的数据
    },
    // mutations的定义方式
    mutations: {
        addRom(state, payload) { // 此处state对应上面的state属性
            state.Rome.push(payload.rom)
        }
    }
})

// — App.vue —

<template>
  <div id="app">
    <span>{{this.$store.state.Rome}}span> // 获取store中的数据
    <button v-on:click="addRome()">我也是罗马button>
  div>
template>

<script>
export default {
  name: "App",
  methods: {
    addRome(){ // 通过mutations更新
      var rome = 'MNG' // 要提交的数据
      this.$store.commit({ 
        // 所传参数是一个对象，包含提交的方法名以及所有参数
	  	type: 'addRom', // 对应mutations中的方法名
	  	rome: rome // 提交的参数，此处可用ES6简略写法
	  })
    }
  }
};
script>

可以看到，上面mutations中的addRom方法有两个参数，第一个是state，另一个是payload。并且mutations中的方法最多只有两个参数

• 第一个参数对应的就是store对象中的state，我们正是通过这个参数来修改store中所保存的变量
• 第二个参数可有可无，主要用于传递数据

三、mutations的响应规则

Vuex中store的状态是响应式的，mutations作为更改store中状态的唯一方法，需要遵循Vue的响应规则。

• 提前在store中初始化好所需的属性
• 当给state中的对象添加新属性时，使用以下方法
• 方式一：使用Vue.set()方法

	addProp(state, payload) {
    // 该方法新增的属性不会添加至响应系统
    // state.obj.id = payload.id
    
    // Vue.set()添加的属性可以加入响应式系统
    // 三个参数分别是改变的对象，新增的属性名，新增的属性值
    Vue.set(state.obj, 'id', payload.id) 
    
    // 删除对象使用Vue.delete()方法
}

• 方式二：用新对象给旧对象重新赋值（新对象替换旧对象）

addPorp(state, payload) {
    // (...) 扩展运算符(对象展开符)
    state.obj = {...state.obj, 'id': payload.id}
}