在 Vuex 中维护通知角标数字最清晰可靠，通过 state 定义 noticeUnreadCount 字段、mutations 封装 SET_NOTICE_UNREAD_COUNT 等操作、mapState/mapGetters 读取，并统一处理轮询、WebSocket、登录登出等场景的数据同步。
直接在 Vuex 中维护通知角标数字是最清晰、可追踪的方式。它避免了事件总线或本地缓存带来的状态不一致问题，尤其适合右上角红点这类需跨页面实时同步的 UI 状态。
定义统一的角标状态字段
在 store/index.js 的 state 中声明一个明确字段，比如 noticeUnreadCount：
- 初始值设为
0或从登录后接口拉取的默认值（如localStorage.getItem('unread') || 0） - 确保该字段只被 mutations 修改，不直接在组件中赋值
- 命名要具语义，避免用模糊名如
badge或num
封装同步更新逻辑（mutations）
所有修改都必须走 mutation，保证变更可调试、可回溯：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 定义
SET_NOTICE_UNREAD_COUNT：接收新数值，直接赋值 - 定义
INCREMENT_NOTICE_UNREAD：用于新增一条未读时 +1 - 定义
RESET_NOTICE_UNREAD：点击进入消息页后清零 - 禁止在 actions 或组件里直接写
state.noticeUnreadCount = ...
组件中安全读取与响应式绑定
不要每次都写 this.$store.state.noticeUnreadCount，推荐两种方式：
立即学习“前端免费学习笔记（深入）”；
- 用
mapState映射到 computed：简洁且自动响应 - 用
mapGetters封装逻辑（例如：只在 >0 时显示红点，showBadge: state => state.noticeUnreadCount > 0） - 模板中直接用
{{ noticeUnreadCount }}，Vue 会自动监听变化
触发更新的典型场景处理
不同来源的数据变更，统一归口到 store：
- 轮询或 WebSocket 收到新消息 → 调用
commit('INCREMENT_NOTICE_UNREAD') - 用户手动标记全部已读 → 请求成功后
commit('SET_NOTICE_UNREAD_COUNT', 0) - App 启动时拉取未读数 → 在 action 中请求并
commit初始值 - 切换账号或登出 → 在 logout action 中重置该字段
