一、什么是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}
}
Logo

前往低代码交流专区

更多推荐