Vuex之Mutation

Posted 2021-05-12 罗毅豪

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

在vue中，我们要修改data中的值，一般会这么做。

this.count = 2

如果我们要修改vuex的store中的状态值，我们就不能简单的通过赋值的方式来做了，如果你这样做，控制台便会报错。

this.$store.state.count = 2 //控制台打印错误

vuex提供了mutation来追踪你对state的值的操作。

Vuex 中的 mutation 非常类似于vue中的$emit事件，每个 mutation 都有一个字符串的事件类型 (type) ，相当于当前事件的唯一标识，以便于你用commit触发它。

每个mutation都有一个回调函数 (handler)。

这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。同时他也支持额外参数的传入，额外参数的术语叫“载荷”。

示例如下：

//state.js
let state = {
  count: 1,
  name: \'lyh\',
}
export default state

//mutation.js
// 第一个参数默认接收state对象
const increment = (state) => {
  state.count++
}
const decrement = (state) => {
  state.count--
}
//第二个参数接收\'载荷\'
const add = (state, n) => {
  state.count += n
}
const fn = (state, json) => {
  state.name = json.first + json.second + state.name
}
export {increment, decrement, add, fn}

<template>
  <div>
    <div>
      <button @click="decrement">-</button>
      <span>{{count}}</span>
      <button @click="increment">+</button>
    </div>
    <div style="margin-top:20px;">
      <button @click="add(1)">+1</button>
      <button @click="add(2)">+2</button>
    </div>
    <button style="margin-top:20px" @click = "changeName(\'my \',\'name is \')">{{name}}</button>
  </div>
</template>
 
<script>
export default {
  computed: {
    count () {
      return this.$store.state.count
    },
    name () {
      return this.$store.state.name
    }
  },
  methods: {
    decrement () {
      this.$store.commit(\'decrement\')
    },
    increment () {
      this.$store.commit(\'increment\')
    },
    add (n) {
      // 你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
      this.$store.commit(\'add\', n)
    },
    changeName (first, second) {
      // this.$store.commit(\'fn\', {
      //   \'first\': first,
      //   \'second\': second
      // })
      // 上面的写法等同于下面，对象风格的提交方式，个人觉得上面的写法更清晰
      this.$store.commit({
        \'type\': \'fn\',
        \'first\': first,
        \'second\': second
      })
    }
  }
}
</script>

mutation也有辅助函数，用法示例如下：

<template>
  <div>
    <div>
      <button @click="decrement">-</button>
      <span>{{count}}</span>
      <button @click="increment">+</button>
    </div>
    <div style="margin-top:20px;">
      <button @click="add(1)">+1</button>
      <button @click="add(2)">+2</button>
    </div>
    <button style="margin-top:20px" @click = "changeName({\'first\':\'my \',second:\'name is \'})">{{name}}</button>
  </div>
</template>
 
<script>
import { mapMutations } from \'vuex\'
export default {
  computed: {
    count () {
      return this.$store.state.count
    },
    name () {
      return this.$store.state.name
    }
  },
  // 辅助函数写法
  methods: {
    ...mapMutations({
      decrement: \'decrement\',
      increment: \'increment\', // 将 `this.increment()` 映射为 `this.$store.commit(\'increment\')`
      add: \'add\',
      changeName: \'fn\' // 将 `this.changeName(json)` 映射为 `this.$store.commit(\'fn\', json)`
    })
  }
}
</script>

Mutation在使用时请不要涉及任何异步操作，如果你想改变count的值，你通过mutation中的两个异步事件，都改变了这个状态值，你怎么知道什么时候回调和哪个先回调呢。

因此mutation用于管理同步事件，如果有异步操作，请用action。