action 是 vuex 中处理异步操作和复杂逻辑的机制，通过提交 mutation 间接变更状态；mutation 必须同步以保障调试与状态可预测性；action 推荐解构写法并完整闭环管理请求生命周期。
Action 是 Vuex 中专责处理异步操作和复杂业务逻辑的机制。它不直接修改状态，而是通过提交 mutation 来驱动状态变更，从而保持整个数据流的可预测性和调试友好性。
为什么不能在 Mutation 里写异步代码
Mutation 必须是同步函数——这是 Vuex 的硬性约束。如果在里面写 setTimeout、API 请求或 await，Vue Devtools 就无法准确追踪状态变化的时间点，时间旅行调试会失效，错误也更难定位。
- 同步性保障了每次 commit 都对应一次明确的状态快照
- 异步操作一旦混入 mutation，会导致 state 更新时机不可控、视图响应延迟或错乱
- 比如连续点击两次“加载用户”，若 mutation 内部发请求，第二次可能覆盖第一次的结果，而你完全无法干预中间过程
Action 的标准写法与参数解构
Action 函数接收两个参数：第一个是 context 对象（含 commit、state、getters 等），第二个是 payload（传入的数据）。实际开发中普遍用 ES6 解构简化写法：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
普通写法：
actions: { fetchUser(context, id) { context.commit('SET_LOADING', true); api.getUser(id).then(res => context.commit('SET_USER', res)); } } -
推荐解构写法：
actions: { fetchUser({ commit, state }, id) { commit('SET_LOADING', true); api.getUser(id).then(res => commit('SET_USER', res)); } } - payload 支持对象或字符串形式，例如
dispatch('fetchUser', { id: 123, lang: 'zh' })或dispatch({ type: 'fetchUser', id: 123 })
异步请求的完整闭环处理
一个健壮的 Action 不只是发请求，还要管理加载态、错误反馈和最终状态归位：
- 开始前 commit('SET_LOADING', true) 显示 loading 指示器
- 成功后 commit('SET_DATA', data) 更新主体数据
- 失败时 commit('SET_ERROR', msg) 记录错误，并可触发 UI 提示
- 无论成败都执行 finally 块，commit('SET_LOADING', false) 清除加载态
- 推荐使用 async/await，语义清晰、错误捕获统一，避免嵌套 Promise
在组件中调用 Action 的两种方式
组件不能直接调用 action 方法，必须通过 store.dispatch 触发：
-
手动 dispatch：
this.$store.dispatch('fetchUser', userId) -
映射为 methods：引入
mapActions，在 methods 中声明mapActions(['fetchUser', 'logout'])，之后直接调用this.fetchUser(userId) - 建议搭配 mapState / mapGetters 使用，让数据读取和行为触发都在 computed / methods 中组织清晰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
