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：
-
state 存未读消息数组，每条含
id、title、content、timestamp、isRead字段；建议用ref([])或直接返回数组，保持响应式 -
actions 提供方法：
addMessage(msg)（去重插入）、markAsRead(id)（单条标记）、markAllAsRead()（批量）、clearAll() -
getters 暴露计算属性：
unreadCount（过滤isRead: false的数量）、unreadList（按时间倒序的未读列表）
接入持久化，避免刷新丢失未读状态
用户关闭页面再打开，未读消息不该消失。Pinia 插件 pinia-plugin-persistedstate 可自动同步到 localStorage：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 安装插件：
npm install pinia-plugin-persistedstate - 在
main.js注册时启用：createPinia().use(persistedState) - 在 store 定义中指定持久化字段：
persist: { key: 'notification-store', paths: ['messages'] }（注意：state 中实际字段名要匹配）
在组件中安全使用，避免响应性丢失
组件里不要直接解构 store 属性（会失去响应式），推荐用 storeToRefs：
- 导入：
import { storeToRefs } from 'pinia' - 调用：
const notificationStore = useNotificationStore()，再const { unreadCount, unreadList } = storeToRefs(notificationStore) - 修改仍走 action：
notificationStore.markAsRead(id)，不直接改unreadList.value
配合服务端，处理消息推送与同步
前端未读状态需和服务端对齐。常见做法：
- 登录后首次拉取未读列表（
fetchUnreadMessages()action 内发起 API 请求并更新 state） - WebSocket 或 SSE 接收新消息时，调用
addMessage()并触发系统通知 - 用户手动标记已读或清空后，同步调用接口更新服务端状态，成功后再本地更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
