Vuex 状态管理如何在消息通知中心集中维护全局角标数字

在 Vuex 中维护通知角标数字最清晰可靠，通过 state 定义 noticeUnreadCount 字段、mutations 封装 SET_NOTICE_UNREAD_COUNT 等操作、mapState/mapGetters 读取，并统一处理轮询、WebSocket、登录登出等场景的数据同步。

直接在 Vuex 中维护通知角标数字是最清晰、可追踪的方式。它避免了事件总线或本地缓存带来的状态不一致问题，尤其适合右上角红点这类需跨页面实时同步的 UI 状态。

定义统一的角标状态字段

在 store/index.js 的 state 中声明一个明确字段，比如 noticeUnreadCount：

1. 初始值设为 0 或从登录后接口拉取的默认值（如 localStorage.getItem('unread') || 0）
2. 确保该字段只被 mutations 修改，不直接在组件中赋值
3. 命名要具语义，避免用模糊名如 badge 或 num

封装同步更新逻辑（mutations）

所有修改都必须走 mutation，保证变更可调试、可回溯：

1. 定义 SET_NOTICE_UNREAD_COUNT：接收新数值，直接赋值
2. 定义 INCREMENT_NOTICE_UNREAD：用于新增一条未读时 +1
3. 定义 RESET_NOTICE_UNREAD：点击进入消息页后清零
4. 禁止在 actions 或组件里直接写 state.noticeUnreadCount = ...

组件中安全读取与响应式绑定

不要每次都写 this.$store.state.noticeUnreadCount，推荐两种方式：

1. 用 mapState 映射到 computed：简洁且自动响应
2. 用 mapGetters 封装逻辑（例如：只在 >0 时显示红点，showBadge: state => state.noticeUnreadCount > 0）
3. 模板中直接用 {{ noticeUnreadCount }}，Vue 会自动监听变化

触发更新的典型场景处理

不同来源的数据变更，统一归口到 store：

1. 轮询或 WebSocket 收到新消息 → 调用 commit('INCREMENT_NOTICE_UNREAD')
2. 用户手动标记全部已读 → 请求成功后 commit('SET_NOTICE_UNREAD_COUNT', 0)
3. App 启动时拉取未读数 → 在 action 中请求并 commit 初始值
4. 切换账号或登出 → 在 logout action 中重置该字段