Pinia 通过 $onAction 统一捕获 action 错误,配合 Vue 全局 errorHandler 和请求层拦截,构建响应式错误通知系统。

Pinia 本身不自动捕获 action 中抛出的错误,但提供了 $onAction 这个内置 AOP 机制,让你能在不侵入每个 action 的前提下,统一监听、拦截和处理所有异常。
用 $onAction 拦截所有 action 错误
这是最轻量、最推荐的第一层统一捕获方式。它能覆盖同步错误和 Promise reject,无需修改任何已有 action 逻辑。
- 在 store 创建后立即调用
$onAction,传入回调函数 - 回调中通过
onError钩子接收错误实例,可做日志、上报、Toast 提示等 - 它对
async/await和throw都有效,底层基于 Proxy 拦截 - 注意:
onError只捕获被$onAction包裹的 action 内部错误,不捕获外部调用链中的错误
结合全局 errorHandler 补全未捕获场景
$onAction 无法捕获组件 setup、生命周期钩子或顶层 Promise 拒绝中的错误,这部分需靠 Vue 的 app.config.errorHandler 补位。
- 在
main.ts中注册全局处理器,转发错误到通知 store - 过滤掉开发工具警告(如
info.startsWith('vue:')),避免干扰 - 该机制只捕获“未被 try/catch 拦住”的同步错误,对
fetch或axios的 reject 仍需单独拦截
主动拦截网络请求失败
API 请求失败不会触发 errorHandler,必须在请求层显式处理。
- Axios:在
response.interceptors.reject中调用通知 store 的addError - Fetch:封装
useApi组合函数,内部统一 try/catch + 错误分发 - 对已知业务错误(如 401、403)可选择静默处理,避免重复弹窗
构建响应式错误通知系统
把错误当作状态管理,而不是直接 alert 或 console.error。
- 新建专用通知 store,用
ref存储带id、type、message、duration的通知项 - 支持自动定时清除,也暴露
remove(id)手动关闭接口 - 组件中用
computed订阅通知列表,配合<transitiongroup></transitiongroup>实现动效渲染 - 关键点:错误从“抛出”变成“存入状态”,展示逻辑与业务逻辑彻底解耦










