Pinia 可结合 Vue 错误处理构建响应式通知系统：通过专用 store 管理通知状态，全局 errorHandler 与 Promise 拦截器触发更新，组件响应式订阅并渲染，实现错误可视化、可交互、自动清理。
Pinia 本身不提供全局错误捕获机制，但可以结合 Vue 的错误处理能力与 Pinia 的状态管理能力，构建一个响应式、可订阅、自动清理的状态驱动通知系统。核心思路是：把错误（或任意通知）作为状态存入 store，由组件按需读取并渲染，同时利用 Vue 的 app.config.errorHandler 或业务逻辑中的 try/catch 触发状态更新。
1. 创建通知 Store（统一管理错误与提示）
定义一个专门管理通知的 Pinia store，支持添加、清除、自动过期：
- 使用
ref存储通知列表，每条含id、type（error / success / warn）、message、duration - 用
setTimeout实现自动移除；支持手动调用remove(id) - 暴露
addError(err)方法，自动提取错误信息（如err.message或err.response?.data?.message）
2. 在 Vue 应用中注册全局错误处理器
在 main.ts 中接入 Vue 全局错误捕获，并转发给通知 store：
- 调用
app.config.errorHandler = (err, instance, info) => { useNotifyStore().addError(err) } - 注意：仅捕获未被
try/catch拦截的同步错误和生命周期钩子中的错误；Promise 拒绝需额外处理（见下一步） - 可选：过滤掉开发工具警告（如
info.startsWith('vue:')）避免干扰
3. 补充 Promise 错误捕获（Axios / fetch 等场景）
网络请求失败不会触发 errorHandler，需主动拦截：
- Axios：在
response.reject拦截器中调用useNotifyStore().addError(error) - 组合式 API 中：封装
useApi函数，内部try/catch后统一调用notify.error() - 避免重复报错：对已知业务错误（如 401）可跳过通知，或降级为静默日志
4. 在组件中响应式消费通知（无侵入、自动销毁）
用 computed 订阅 store 中的通知列表，配合过渡动画渲染：
- 模板中遍历
notifications，每个 item 绑定key="id"保证正确复用 - 使用
<transitiongroup></transitiongroup>实现进入/离开动效（如淡入滑出） - 点击关闭按钮时调用
store.remove(id)；组件卸载时无需手动清理，状态由 store 统一维护 - 进阶：支持按 type 过滤（如只显示 error），或限制最大显示数量（防止堆叠）
这套方案把错误从“控制台日志”变成“用户可见、可交互、可追溯”的状态，既保持 Pinia 的响应式优势，又不耦合具体 UI 组件。关键是把“抛错”和“展示”解耦，让错误流经状态层，而不是散落在各处 alert 或 console.error。
