深入理解 Vuex 核心功能
🎯 引言
如果你正在学习 Vue 技术栈，遇到 Vuex 这款状态管理工具是很自然的。掌握 Vuex 的核心功能——Getters、Actions 和 Mutations，能让你轻松管理复杂应用中的状态，实现清晰、可维护且高效的代码架构。本文将帮你从零开始，理解这些概念，以及它们在实际开发中具体怎么用。
✨ 什么是 Getters 计算属性
先来聊聊 Getters。你知道 Vue 里面的计算属性吗？它们是基于已有的数据，通过计算得出新的值，并且会缓存结果，只有依赖发生变化时才会重新计算。
Vuex 的 Getters 也是类似的存在 —— 它们基于 state 计算出“派生状态”，帮助你把复杂的逻辑集中到这里，而不是在组件中反复写。
比如，你有个状态存储了购物车里的商品列表，你想计算购物车的总价，这时 Getters 就很合适。
const store = new Vuex.Store({
state: {
cart: [
{ id: 1, name: '手机', price: 2999, quantity: 2 },
{ id: 2, name: '耳机', price: 199, quantity: 1 },
],
},
getters: {
totalPrice(state) {
return state.cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
},
},
});
然后，你在组件里就可以通过 this.$store.getters.totalPrice 获取总价了。
🚀 什么是 Actions 异步提交
Vuex 里，Mutation 是同步修改状态的，但现实开发中经常需要和后端接口交互，这属于异步操作。为了不让异步逻辑和状态修改混在一起，Vuex 引入了 Actions。
Actions 负责处理异步逻辑，比如网络请求、定时器等。它们通过调用 dispatch 触发，不能直接修改 state，只能调用 Mutation 来修改。
举个例子，假设你要从接口获取用户数据：
const store = new Vuex.Store({
state: {
userInfo: null,
},
mutations: {
setUserInfo(state, userData) {
state.userInfo = userData;
},
},
actions: {
fetchUserInfo(context) {
// 模拟异步请求
setTimeout(() => {
const data = { name: '张三', age: 25 };
context.commit('setUserInfo', data);
}, 1000);
},
},
});
组件调用：
this.$store.dispatch('fetchUserInfo');
这样，异步处理和状态修改职责清晰分开。
🔍 为什么要区分 Mutation 和 Action
区分 Mutation 和 Action，有两个核心原因：
1. Mutation 保证状态变更同步且可追踪
Vuex 要求所有状态变更必须通过 Mutation 进行，而且 Mutation 必须是同步函数。这样做是为了让状态变更流程可预测，方便调试和记录历史。
比如开发时你可以用 Vue Devtools 追踪每一步 Mutation，知道状态是如何一步步变更的。
2. Action 用于异步操作和业务逻辑
直接在 Mutation 里写异步代码，会让状态变更变得不可预测，也难以追踪。Action 作为中间层，处理异步请求、复杂业务逻辑，然后调用 Mutation 来同步修改状态。这种职责分离带来了代码的清晰和维护便利。
🎯 实战案例：用 Vuex 管理用户登录状态
我们来做个小练习，模拟一个用户登录流程。
- state 里保存用户信息和登录状态
- mutation 里同步修改登录状态和用户信息
- action 异步模拟登录请求
const store = new Vuex.Store({
state: {
user: null,
isLoggedIn: false,
},
mutations: {
loginSuccess(state, userData) {
state.user = userData;
state.isLoggedIn = true;
},
logout(state) {
state.user = null;
state.isLoggedIn = false;
},
},
actions: {
login(context, credentials) {
// 模拟异步 API 请求
return new Promise(resolve => {
setTimeout(() => {
// 简单验证
if (credentials.username === 'admin' && credentials.password === '1234') {
const userData = { username: 'admin', name: '管理员' };
context.commit('loginSuccess', userData);
resolve(true);
} else {
resolve(false);
}
}, 1000);
});
},
logout(context) {
context.commit('logout');
},
},
getters: {
welcomeMessage(state) {
return state.isLoggedIn ? `欢迎回来，${state.user.name}！` : '请登录';
},
},
});
调用示例：
store.dispatch('login', { username: 'admin', password: '1234' }).then(success => {
if (success) {
console.log(store.getters.welcomeMessage);
} else {
console.log('登录失败');
}
});
🧾 小节总结
- Vuex 的 Getters 用于基于 state 派生新的状态，类似 Vue 的计算属性
- Actions 处理异步操作，通过 dispatch 触发，只能提交 Mutation 修改状态
- Mutation 保证状态变更同步且可追踪，Action 用于异步逻辑和业务处理，二者职责分明
❓ 知识问答（Q&A）
Q：为什么 Mutation 必须是同步的？
A：同步可以保证状态变更顺序明确，方便调试和回溯。异步会带来状态不确定性，影响状态管理的可靠性。
Q：能否在 Action 里直接修改 state？
A：不能，Action 只能通过提交 Mutation 来修改 state，保证状态变更流程统一。
Q：Getters 和 state 有什么区别？
A：state 是原始状态数据，Getters 是基于 state 计算出来的派生状态，类似计算属性。
🧪 小练习
练习1
实现一个 Vuex Store，管理一个待办列表，包含添加待办、标记完成的功能。用 Mutation 同步修改状态，用 Action 异步模拟从服务器加载初始待办数据。
练习2
写一个 Getters，计算已完成的待办个数，并在组件中显示。
🎉 恭喜你已经掌握 Vuex 中的 Getters、Actions 和 Mutations 技能啦！