模块化是实现多标签页状态隔离最直接有效的方式，通过独立Store模块、路由解耦、视图层隔离及契约式跨页协作确保各标签页状态独立且可控。
模块化是实现多标签页状态隔离最直接有效的方式。它不是简单地把代码拆开，而是通过明确的边界、独立的生命周期和可控的数据流向，让每个标签页像一个“小应用”一样运行。
用独立 Store 模块管理每个标签页状态
在 Vue3 + Pinia 场景下，不推荐所有标签页共用一个 store 实例来存全部数据。更合理的是为每个标签页动态创建专属 store 模块，或按需注册命名空间化的子模块。
- 打开新标签页时，调用 createPinia().register('tab-123', tabStore) 注册专属模块
- 关闭标签页时，主动 unregister('tab-123') 并清理副作用（如未完成的请求、定时器）
- 模块内 state 只保存该标签页强相关的数据，例如表单草稿、筛选条件、表格滚动位置
- 避免在模块中直接读取其他 tab 的 state，跨页通信走显式事件总线或中央协调器
路由与组件实例解耦：禁用默认复用
Vue Router 默认复用相同组件实例，会导致多个标签页共享同一份响应式数据。必须打破这种隐式耦合。
- 在路由配置中为需要多实例的页面添加 key: route.fullPath 或 key: route.name + route.params.id
- 配合
强制组件重新挂载 - 对 Detail 类页面（如 /order/1、/order/2），确保每次切换都触发 created/mounted，而非仅更新 props
- 若使用 keep-alive，应包裹在标签页内部，且只缓存当前激活 tab 的内容，非激活态需 suspend 或手动销毁
视图层隔离：用命名插槽或动态组件控制渲染域
标签页内容不应无差别注入全局上下文，而应限定其可访问的依赖范围。
- 每个
内部使用独立的 渲染，不共享父级 data 或 provide - 通过 provide/inject 向当前 tab 注入其专属 store、API client 实例、权限上下文等，避免污染全局
- 禁止在标签页组件中直接 import 全局 store 或调用 $pinia.state.value —— 所有状态访问必须经由注入的实例
- 对第三方图表库（如 ECharts）、编辑器（如 Monaco）等重型组件，确保销毁逻辑绑定到 tab 卸载钩子，防止内存泄漏
跨标签页协作：不共享状态，只共享契约
真正复杂的 SPA 往往需要标签页间协同，但状态隔离不等于完全割裂。关键在于用契约代替引用。
- 定义统一的消息结构，如 { type: 'REFRESH_DATA', payload: { scope: 'user-list' } }，通过全局事件总线或自定义 hook 触发
- 接收方标签页自行判断是否响应（例如检查自身是否处于 user-list 列表页），再调用本地 store 的 refresh 方法
- 对“复制链接到当前页”这类操作，用 URL search 参数传递指令（如 ?sync=123），由目标页解析并拉取对应数据
- 避免使用 localStorage 或 sessionStorage 做状态同步 —— 它们缺乏时效性、无监听机制，且无法区分 tab 实例
