Actions专责异步逻辑，须用async/await+try/catch调用API（API需抽离至独立模块），通过commit触发mutations更新state，并配合loading/error/data等状态字段管理请求生命周期。
Vue 状态管理中的 Actions 是专门负责处理异步逻辑的位置，不能直接修改状态，而是通过提交 mutations 来同步更新 state。核心原则是：**异步操作放 actions，状态变更走 mutations，API 调用要抽离，错误和加载状态需显式管理**。
统一用 async/await 编写，避免 .then 链式调用
所有涉及请求的 action 都应声明为 async 函数，并用 await 等待 Promise 完成。这样能保证错误可被 try-catch 捕获，逻辑线性清晰，也便于在组件中 await dispatch 的返回值。
- ✅ 正确写法：使用 await + try/catch，最后用 commit 提交 mutation
- ❌ 避免混用：不推荐在 action 内混合 .then().catch() 和 await，易导致错误遗漏或状态错乱
- ⚠️ 注意：Vuex 的 dispatch 返回 Promise，组件中可 await store.dispatch('fetchUser') 获取最终结果
配合 loading/error/data 状态字段管理生命周期
在 store 的 state 中提前定义响应式字段，让组件能直观感知请求过程。常见组合包括：
- loading：布尔值，标识当前请求是否进行中（用于禁用按钮、显示骨架屏）
- error：字符串或 null，存放用户友好的提示（如“网络异常，请重试”），而非原始 error 对象
- data / list / item：存放成功响应的数据，保持类型明确、结构稳定
API 调用必须抽离到独立模块，不写在 action 内
action 只做调度和状态流转，不关心请求细节。把 axios/fetch 封装进 src/api/user.ts 等文件，好处明显：
立即学习“前端免费学习笔记（深入）”；
- 接口地址、请求头、鉴权 token、拦截器全部集中维护
- 方便单元测试和 Mock（例如用 vitest mock api.getUser）
- TypeScript 类型推导更准确，action 内部只处理业务逻辑，不处理 HTTP 层
高频场景建议支持请求取消（AbortController）
对搜索框输入、下拉刷新、自动补全等场景，上一次请求未完成时发起新请求，容易造成状态覆盖。可在 action 中引入 AbortController：
- 每次请求前 new AbortController()
- 将 signal 传入 fetch 或 axios({ signal })
- 在新请求发起前调用上一个 controller.abort()
- 注意：需在 store 中保存 controller 实例或用局部变量管理生命周期
