Actions 是 Vuex 中处理异步逻辑的唯一入口，必须用于网络请求等异步操作；mutation 必须同步，否则破坏调试与状态一致性；Action 应用 async/await + try/catch 标准写法，配套定义 loading、error、data 等 state 字段，并将 API 抽离至独立文件统一管理。
Actions 是 Vuex 中专用于处理异步逻辑的入口，它不直接改状态，而是通过 commit 触发 mutations 来同步更新 state。网络请求这类典型异步操作，必须放在 action 里，不能塞进 mutation —— 否则会破坏调试能力、导致状态不可预测。
为什么必须用 Action 而不是 Mutation 处理请求
mutation 必须是同步函数，这是 Vuex 的硬性要求。一旦在里面写 fetch、setTimeout 或 await，Vue Devtools 就无法准确打点状态快照，时间旅行调试失效，连续请求还容易相互覆盖。Action 则天然支持异步，能完整控制“发起→成功/失败→收尾”整个生命周期。
标准写法：解构 + async/await + try/catch
推荐使用 ES6 解构获取 commit，并用 async/await 统一处理 Promise：
- action 函数声明为 async，payload 可传对象（如
{ id: 123 }）或字符串 - 用 try 包裹请求，成功后 commit 更新数据；catch 捕获错误并 commit 错误信息
- 无论成败，用 finally 清除 loading 状态，避免 UI 卡在加载态
配套 state 字段要提前定义好
store 的 state 中需显式声明响应式字段，让组件能监听变化：
立即学习“前端免费学习笔记（深入）”；
- loading：布尔值，控制按钮禁用、骨架屏显示
- error：字符串类型，存用户友好的提示（比如“请求超时，请重试”），不要直接扔 error 对象
- data / list / item：存放响应结果，结构保持稳定，便于模板渲染和 TypeScript 类型推导
API 必须抽离，Action 只做调度
把 axios/fetch 封装到 src/api/user.ts 这类独立文件中：
- 统一管理 base URL、headers、token 注入、请求/响应拦截器
- 方便单元测试时 mock 接口，也利于类型约束和复用
- Action 内只关注“什么时候发、发完怎么转、出错怎么兜”，不掺杂 HTTP 细节
