Vue Pinia 状态管理如何在消息通知中心管理未读消息队列

Pinia 管理消息通知中心未读队列，核心是全局响应式状态维护与实时同步：定义含 messages state、addMessage/markAsRead/clearAll actions 和 unreadCount/unreadList getters 的 notification store；通过 pinia-plugin-persistedstate 持久化至 localStorage；组件中用 storeToRefs 保持响应式，配合服务端 API 和 WebSocket 实现双向同步。

用 Pinia 管理消息通知中心的未读消息队列，核心是把“未读消息列表”作为全局状态集中维护，并确保新增、标记已读、清空等操作能实时同步到所有相关组件（比如右上角小红点、通知弹窗、侧边栏入口）。它不是简单存个数组，而是要兼顾响应性、持久化和业务逻辑隔离。

定义通知 Store，封装未读消息状态与行为

在 src/stores/notification.js 中创建独立 store：

1. state 存未读消息数组，每条含 id、title、content、timestamp、isRead 字段；建议用 ref([]) 或直接返回数组，保持响应式
2. actions 提供方法：addMessage(msg)（去重插入）、markAsRead(id)（单条标记）、markAllAsRead()（批量）、clearAll()
3. getters 暴露计算属性：unreadCount（过滤 isRead: false 的数量）、unreadList（按时间倒序的未读列表）

接入持久化，避免刷新丢失未读状态

用户关闭页面再打开，未读消息不该消失。Pinia 插件 pinia-plugin-persistedstate 可自动同步到 localStorage：

1. 安装插件：npm install pinia-plugin-persistedstate
2. 在 main.js 注册时启用：createPinia().use(persistedState)
3. 在 store 定义中指定持久化字段：persist: { key: 'notification-store', paths: ['messages'] }（注意：state 中实际字段名要匹配）

在组件中安全使用，避免响应性丢失

组件里不要直接解构 store 属性（会失去响应式），推荐用 storeToRefs：

1. 导入：import { storeToRefs } from 'pinia'
2. 调用：const notificationStore = useNotificationStore()，再 const { unreadCount, unreadList } = storeToRefs(notificationStore)
3. 修改仍走 action：notificationStore.markAsRead(id)，不直接改 unreadList.value

配合服务端，处理消息推送与同步

前端未读状态需和服务端对齐。常见做法：

1. 登录后首次拉取未读列表（fetchUnreadMessages() action 内发起 API 请求并更新 state）
2. WebSocket 或 SSE 接收新消息时，调用 addMessage() 并触发系统通知
3. 用户手动标记已读或清空后，同步调用接口更新服务端状态，成功后再本地更新