Vuex 是 Vue.js 中的一种状态管理库，它提供了一种集中式存储管理应用的所有组件的状态，并以可预测的方式进行状态更改。Vuex 中有三种不同的概念，包括：actions、mutations 和 getters。三者各有不同的作用。本文将详细介绍它们的作用和用法。
Actions
Vuex 中的 actions 是用于处理异步操作的。我们在触发 mutations 中的方法来更新状态时，可能需要先进行异步操作，例如从后台获取数据。这时就可以使用 actions。
actions 的作用是封装 Vuex 中的异步操作，并调用 mutations 中的方法更新状态。它可以进行任何异步操作，包括 http 请求、定时器等。actions 通过 store.dispatch() 方法调用。
Actions 的用法
actions 中的每个方法都接受一个 context 参数，包含以下属性：
- state：当前 state 对象；
- getters：当前的 getters 对象；
- commit：提交 mutations 中的方法；
- dispatch：触发 actions 中的方法；
下面是一个简单的获取数据的示例：
const actions = {
fetchData(context) {
return new Promise((resolve) => {
// 异步获取数据
setTimeout(() => {
const data = { name: "hello", age: 18 };
resolve(data);
}, 1000);
}).then((data) => {
// 提交 mutations 中的数据
context.commit("updateData", data);
});
},
};Mutations
mutations 是用来更新状态的方法，它是 Vuex 中的核心概念。同步操作应该放在 mutations 中进行。所有的 mutations 都接收 state 参数作为第一个参数，可以修改状态。mutations 不能进行异步操作，因为 Vuex 需要记录状态变化，异步操作无法追踪状态变化。mutations 通过 store.commit() 方法调用。
Mutations 的用法
下面是一个简单的示例：
const mutations = {
updateData(state, payload) {
state.data = payload;
},
};Getters
Vuex 中的 getters 可以看作是 store 中的计算属性，它是用来获得 state 中的数据的。getters 在需要从 state 派生一些值时非常有用。当数据需要被多个组件使用时，使用 getters 可以避免代码的冗余。
Getters 的用法
下面是一个简单的示例：
const getters = {
fullName: (state) => {
return state.firstName + " " + state.lastName;
},
};总结
- actions 用于进行异步操作，可以使用 commit 提交 mutations 中的方法来更新状态；
- mutations 用于更新状态，是同步操作；
- getters 用于获得派生状态的值。
在开发 Vue 应用时，使用 Vuex 中的 actions、mutations、getters 可以更方便地管理组件的状态，提高代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b59945add4f0e0ffe5a7f0