Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

Vue是一种流行的JavaScript框架，用于构建大型Web应用程序。Vue官方推荐使用Vuex来管理应用程序中的状态。Vuex是一个专为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以清晰的规则保证状态只能通过mutations更改，由于这一特性，Mutation成为了Vue唯一可以更改vuex实例中state数据状态的属性对象。

Mutation的作用是：对于一个固定状态的对象(State)，Mutation用于更改状态，但它是一个同步操作方式。Mutation 必须是同步函数，通过 store.commit 方法提交一个 Mutation, Mutation 会得到当前状态树和一个载荷(Payload)作为参数，载荷是你必须传递给 Mutation 的参数。Mutation 里面唯一被允许更改 State 的状态是它的第一个参数，也就是当前的状态树。

下面是示例说明：

假如 State 里面定义了一个名为 count 的属性，Mutation 里面我们就可以修改它的值，count 是一个数字类型：

// State
const state = {
  count: 0
}

// Mutation
const mutations = {
  increment (state) {
    state.count++
  }
}

另一个示例是针对一个通过 API 获得的用户列表的场景：

// State
const state = {
  users: []
}

// Mutation
const mutations = {
  setUsers (state, users) {
    state.users = users
  }
}

上面的代码对应的场景是获取远程API的用户列表，异步获取到数据以后，我们需要更改 State 内的 users 对象。我们将当前状态对象(state)作为第一个参数，而要传递的数据(users)作为第二个参数载荷(Payload)。

Mutation 是一个同步的操作行为，它非常适合处理同步修改 State 的需求。建议在一个单独的模块或页面中存储 Mutation，方便维护和代码重用。这样，在 Mutation 中更改状态会更加明确和一致，也会变得更加易于维护。