pinia 的 action 是处理异步逻辑最自然、最推荐的位置，支持 async/await，应统一用 await 避免混用 .then()，配套管理 loading/error/data 状态，api 调用需抽离至独立模块，必要时用 abortcontroller 取消请求，并可通过 $onaction 统一监控。

Pinia 的 Action 是处理异步逻辑最自然、最推荐的位置。它不强制异步，但完全支持 `async/await`，让你把请求、状态更新、错误反馈和副作用控制集中在一个函数里，既清晰又可控。

用 async/await 写 Action，别混用 .then()

所有涉及接口调用的 Action 都应声明为 async 函数，并统一用 await 等待 Promise 完成。

• 避免在同一个 Action 里混用 .then() 和 await，会导致错误捕获断裂、堆栈不清晰
• 同步逻辑（如表单校验、本地计算）可直接写，无需加 async
• 异步 Action 默认返回 Promise，组件调用时需 await 或 .then() 处理结果

配套管理 loading、error、data 状态

在 Store 中定义响应式字段，让组件能直观反映请求生命周期：

• loading: boolean —— 请求发起时设为 true，结束（无论成功失败）设为 false
• error: string | null —— 存用户友好的错误提示，比如 err.response?.data?.message
• data（或具体字段如 user、list）—— 成功后赋值，避免空值渲染异常

API 调用必须抽离到独立模块

Action 不该出现 axios.get() 或 fetch() 原始调用，而是调用封装好的 API 函数：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• 好处：拦截器、鉴权头、Mock 开关、类型自动推导全由 API 层统一管控
• 示例路径：src/api/user.ts 导出 getUser(id: string)，Action 内只写 const res = await getUser(id)
• 便于单元测试 —— 可直接 mock API 模块，无需启动真实服务

需要时主动取消请求

对搜索、输入联想、频繁切换等场景，用 AbortController 避免响应错乱：

• 每次请求前新建 const controller = new AbortController()
• 传入 signal: controller.signal 到 API 调用中
• 新请求发起时调用 controller.abort()，终止上一个未完成请求

用 $onAction 做统一监控和增强

不侵入业务代码，也能实现日志、错误上报、加载态联动：

• before 阶段记录起始时间、设置全局 loading 计数器
• after 获取最终返回值，统计耗时并打点
• onError 同时捕获同步 throw 和异步 reject，按 action 名称或错误码分级处理
• 组件内订阅默认随卸载自动清理；全局长效监控需传 { detached: true } 并手动管理销毁

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