vuex 中 mutation 的作用以及用法

在 Vue.js 中，Vuex是一种状态管理模式，用于管理应用程序中的共享状态。Vuex的核心概念包括state、getter、mutation、action和module等。

Mutation是Vuex中用于修改state的唯一途径。Mutation是同步函数，用于改变state中的数据，而不是直接操作state。Mutation接收state作为第一个参数，接下来是payload，payload可以是单个数据，也可以是一个对象，包含多个数据。Mutation的作用就是修改state中的数据，保证了数据的可追踪性和可维护性。

在使用Vuex时，我们可以通过store.commit()方法来调用mutation。commit()方法接收两个参数，第一个参数是mutation的名称，第二个参数是payload（可选的）。

下面是一个简单的mutation的例子：

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

store.commit('increment', 10)

在上面的例子中，我们定义了一个state，其中包含count属性，然后定义了一个mutation，名称为increment，修改state中的count属性，增加payload的值。最后，我们通过store.commit()方法来调用increment mutation，传入payload的值为10。

总之，mutation是Vuex中用于修改state的唯一途径，它保证了数据的可追踪性和可维护性。在使用Vuex时，我们通过store.commit()方法来调用mutation，传入mutation的名称和payload（可选）。