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" 保证正确复用
• 使用 实现进入/离开动效（如淡入滑出）
• 点击关闭按钮时调用 store.remove(id)；组件卸载时无需手动清理，状态由 store 统一维护
• 进阶：支持按 type 过滤（如只显示 error），或限制最大显示数量（防止堆叠）

这套方案把错误从“控制台日志”变成“用户可见、可交互、可追溯”的状态，既保持 Pinia 的响应式优势，又不耦合具体 UI 组件。关键是把“抛错”和“展示”解耦，让错误流经状态层，而不是散落在各处 alert 或 console.error。