Vuex mutations 的作用以及具体用法

Vuex 中的 mutations 用于修改 Vuex store 中的状态，它是一个纯函数，接收一个状态对象 state 和一个负载（payload）参数。在 mutations 中只能执行同步操作，不能执行异步操作。

mutations 的作用是保证状态的可追溯性和可维护性，因为在 Vuex 中，所有的状态变更都要通过 mutations 来进行，这样可以让我们更清晰地知道每个状态变更的来源，并且可以方便地追踪状态变化的历史记录，从而更容易定位问题。

具体用法如下：

1. 在 store.js 中定义状态和 mutations：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload
    }
  }
})

export default store

2. 在组件中使用 mutations：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
  export default {
    computed: {
      count() {
        return this.$store.state.count
      }
    },
    methods: {
      increment() {
        this.$store.commit('increment', 1)
      }
    }
  }
</script>

在组件中使用 $store.commit() 方法来提交 mutations，第一个参数为 mutations 名称，第二个参数为负载（payload），如果 mutations 不需要负载，则可以省略第二个参数。mutations 会接收到当前的状态对象和负载参数，从而修改 Vuex store 中的状态。