Pinia 全局通知管理核心是状态化消息队列与生命周期控制：store 中以 visible 字段管理显隐，actions 提供 push/remove/clear 方法，组件通过 transition-group 渲染并监听 onShow/onHide 暂停恢复倒计时。
用 Pinia 管理全局通知消息队列，核心是把消息作为状态统一存入 Store，并由一个常驻组件监听、渲染和控制生命周期。关键不在“怎么弹”，而在“怎么管”——避免重复逻辑、防止路由切换丢失、适配小程序后台限制、支持手动清除与自动销毁。
定义带生命周期控制的 notifications state
在 Pinia store 中声明一个响应式数组，每条消息包含必要字段：
- id：唯一标识（推荐用 Date.now() + Math.random()）
- content：要显示的文本
- type：info / success / warn / error，用于样式区分
- duration：毫秒数，如 3000（默认 3 秒后自动关闭）
- onClick：点击回调函数（可选）
- visible：布尔值，控制显隐（不直接 splice 删除，避免动画中断或状态错乱）
提供添加与清除消息的方法
在 store 的 actions 中封装操作逻辑，确保调用简洁、语义清晰：
- pushNotify(content, { type = 'info', duration = 3000, onClick })：生成消息对象并 push 到数组；同时启动倒计时（仅前台活跃时执行）
-
removeNotify(id)：将对应消息的
visible设为 false，触发过渡动画退出 -
clearAll()：批量设所有消息
visible = false
注意：倒计时使用 setTimeout 启动，但需在页面切后台时 clearTimeout，在回到前台时重新计时（uni-app 小程序中 onHide/onShow 生命周期可配合监听页面可见性）。
创建全局挂载的通知组件
在 App.vue 或主布局组件中固定引入并渲染该组件，确保始终存在：
- 用
v-for遍历notifications.filter(n => n.visible)渲染消息项 - 包裹
<transition-group>实现入场/离场动画（uni-app 支持部分 Vue 过渡语法） - 每条消息绑定
@click="store.removeNotify(item.id); item.onClick?.()" - 组件内监听
onShow和onHide，暂停/恢复倒计时任务（小程序必需）
持久化不是必须，但可按需开启
通知消息属于临时态，一般不应持久化。若需保留未读提醒（如后台收到但用户未打开），建议拆分为两类状态：
- UI 层通知（当前队列）：纯内存管理，不进 storage
-
业务层提醒（如未读数、待处理事件）：单独建 store，启用
pinia-plugin-unistorage持久化
这样既保证提示及时性，又避免本地缓存过期消息干扰体验。
