Vuex中mutations是唯一同步修改state的地方，actions负责异步逻辑并提交mutations；此分工保障状态变更可追踪、可调试、可预测。

Vuex 里改状态，不能随便动 —— Mutations 是唯一能直接改 state 的地方，但必须同步；Actions 不改 state，专管异步和逻辑，再交由 Mutations 去落地。这个分工不是为了绕弯子，而是让状态变化可追踪、可调试、可预测。

mutations：状态修改的“会计账本”

Mutations 就像财务记账员：每一笔变动都得当场登记、实时生效，不能等、不能拖。

• 只能同步执行 —— 比如 state.count++、state.user = payload，立刻完成
• 不能写 setTimeout、fetch、await 这类异步操作，否则 devtools 日志会断连、时间线错乱
• 调用方式固定：必须用 store.commit('SET_USER', user)，不能直接调函数
• 名字是字符串类型（比如 'SET_USER'），方便 devtools 捕获和回溯

actions：业务逻辑的“调度中心”

Actions 像项目经理：不亲手记账，但负责对接接口、处理失败、组合步骤，最后把结果交给 mutations 记录。

• 可以写 async/await、try/catch、多个 API 串行调用
• 不能直接改 state —— 改了 Vuex 也不会响应，还会在严格模式下报错
• 通过 context.commit('MUTATION_NAME', payload) 把数据转交 mutations
• 支持返回 Promise，方便组件里 await dispatch('login') 后续处理

为什么非得分这么细？

不是 Vue 故意设门槛，而是两个现实问题倒逼出的设计：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• 调试不可靠：mutation 里塞异步，devtools 看到的“操作时间点”和实际 state 变更时间对不上，排查时容易误判
• 逻辑难复用：登录要验参 + 调接口 + 存 token + 更新用户信息 —— 全塞 mutation 里既臃肿又没法单独测试，拆到 action 就清晰多了

一个登录流程对照看懂区别

✅ 正确写法：

• Action：调 api.login() → 成功后 commit('SET_USER', res.data) → 失败 commit('SET_ERROR', msg)
• Mutation：只做两件事 —— state.user = user 和 state.error = msg

❌ 错误写法：在 mutation 里直接 await api.login()，表面能跑，但 devtools 日志空白、时间轴断裂、上线后难以定位状态异常来源。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！