核心是“精准订阅 + 惰性计算 + 模块隔离”：用 storeToRefs 解构所需字段避免无效重渲染，getter 缓存派生值需依赖稳定，按业务域拆分 Store 模块并动态注册，持久化仅限关键状态且限定 paths。

核心是“精准订阅 + 惰性计算 + 模块隔离”：避免全局状态变更牵连无关组件，用 storeToRefs 解构所需字段，通过 getters 缓存派生值，并按业务域拆分 Store 模块。

只响应真正需要的状态

组件不应监听整个 Store 实例。使用 storeToRefs 显式解构关心的字段，可防止其他状态变化触发重渲染：

• ✅ 正确写法：const { username, avatar } = storeToRefs(userStore)
• ❌ 避免写法：const state = userStore.$state（整块响应式代理）
• 对大型对象（如用户权限列表），配合 shallowRef 或 markRaw 跳过深度响应式转换

让 getter 真正缓存起来

Getter 的缓存机制依赖其依赖项是否稳定。破坏缓存的行为会带来重复计算开销：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 不直接在 getter 中调用方法或访问非响应式外部变量
• 复杂逻辑拆成多个小 getter，例如：hasPermission 和 allowedRoutes 分开定义，再组合使用
• 高频读取但低频更新的数据（如系统配置），考虑用 computed 包裹 getter 结果，进一步控制更新时机

模块化拆分与按需加载

单一 Store 容易成为性能热点。模块不是只为组织代码，更是为隔离响应式依赖链：

立即学习“前端免费学习笔记（深入）”；

• 按功能划分独立 Store，如 useUserStore、useTabStore、usePermissionStore
• 动态注册模块（store.registerModule）适用于路由级模块，例如仅在进入“报表中心”时加载图表相关状态
• 模块间通信优先用 action 调用，避免跨模块直接读写 state；必要时用事件总线或组合式函数解耦

持久化与本地缓存策略

频繁读写 localStorage 本身有性能成本，且可能引发状态不一致：

• 只持久化关键状态（如 token、主题色、侧边栏折叠状态），避开实时变动的数据（如搜索关键词、临时表单）
• 用 vuex-persistedstate 插件时限定 paths，禁用自动同步整个模块
• 对静态配置类数据（如菜单结构、字典项），首次加载后 Object.freeze，彻底跳过响应式处理