多店铺切换需通过pinia动态注册命名空间化store实现状态隔离，按店铺id创建独立实例，分层管理私有与共享数据，并通过依赖注入绑定组件上下文，配合销毁机制防止内存泄漏。
多店铺切换本质是多租户状态隔离问题，Pinia 本身不内置“多实例”概念，但可通过模块化 + 动态注册 + 命名空间控制实现精准隔离。关键不是复制 Store，而是让每个店铺拥有独立的状态上下文。
按店铺 ID 动态注册命名空间化 Store
避免所有店铺共用一个 useShopStore() 实例。应为每个店铺生成带唯一标识的 Store 模块：
- 定义工厂函数：
export const createShopStore = (shopId) => defineStore(`shop-${shopId}`, { state: () => ({ orders: [], settings: {} }) }) - 切换店铺时：先卸载旧模块（
pinia.unmountStore('shop-1001')），再调用createShopStore('shop-1002')()注册新模块 - Store 内部不硬编码 shopId，所有 API 请求、缓存键、本地存储 key 都显式拼接
shopId，防止数据串扰
私有状态与共享状态分层管理
并非所有数据都要隔离。合理划分可减少冗余、提升性能：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 必须隔离：店铺专属配置（如运费模板、商品类目树）、未提交草稿、当前编辑的商品、库存预警阈值
- 可共享只读：平台级产品库（SKU 基础信息）、通用权限规则、系统公告、币种汇率表
- 需受控同步：营销活动参与状态——通过事件总线广播 “店铺 A 已报名活动 X”，由目标店铺 Store 自行决定是否拉取快照，而非直接共享 state
组件层绑定当前店铺上下文
禁止组件直接 import 全局 Store 或调用 useShopStore()。应通过依赖注入提供当前店铺实例：
- 在切换店铺时，调用
app.provide('currentShopStore', shopStoreInstance) - 业务组件中使用
const shopStore = inject('currentShopStore')获取专属 Store - 路由组件配合
:key="route.params.shopId"强制重挂载，确保 created / mounted 重新执行，加载对应店铺数据
清理与销毁机制不可省略
关闭店铺或用户登出时，残留状态会导致内存泄漏和逻辑错乱：
- 主动调用
shopStore.$dispose()清理响应式依赖 - 取消未完成的请求（如 axios cancel token）
- 清除定时器、WebSocket 连接、ECharts 实例等副作用
- 从 IndexedDB 或 localStorage 中删除以
shop-${id}为前缀的缓存项
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
