Pinia 本身不跨标签页共享状态，需通过 localStorage 持久化 + storage 事件监听实现同步：使用 pinia-plugin-persistedstate 启动时恢复状态，并在 storage 事件中手动更新其他标签页。
Pinia 本身不跨标签页共享状态——每个标签页是独立的浏览器上下文，有自己的 JavaScript 堆和 localStorage 访问权限，但共用同一份 localStorage（或 sessionStorage）。所以多标签页同步的关键不是“让 Pinia 自动互通”，而是**统一把状态落盘到 localStorage，并在各标签页启动时主动恢复，再配合 storage 事件监听实现动态更新**。
基础方案：pinia-plugin-persistedstate + localStorage
这是最常用、最轻量的解法，适合大多数场景（如用户偏好、登录态、购物车）：
- 安装插件：
npm install pinia-plugin-persistedstate - 在每个页面入口（如
main.ts）中统一注册并启用持久化：
// shared/pinia.ts
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(persist)
export default pinia
- store 定义保持原样，无需手动存取：
// stores/theme.ts
export const useThemeStore = defineStore('theme', {
state: () => ({ mode: 'light' }),
// 默认自动存入 localStorage，关闭标签页再打开也能恢复
})
✅ 优点：开箱即用、零侵入、支持路径白名单与自定义存储介质。
⚠️ 注意：它只解决“启动时恢复”，不解决“运行中其他标签页改了，当前页自动响应”。
实时同步：监听 storage 事件 + 手动触发更新
localStorage 本身支持跨标签页写入，且当一个标签页调用 localStorage.setItem() 时，其他同源标签页会收到 storage 事件。我们可以利用这一点补全响应式更新：
- 在 store 初始化后，添加全局
storage监听：
const themeStore = useThemeStore()
window.addEventListener('storage', (e) => {
if (e.key === 'pinia-theme') { // 对应 persist 插件默认生成的 key
try {
const newState = JSON.parse(e.newValue || '{}')
themeStore.$patch(newState)
} catch (err) { /* 忽略解析失败 */ }
}
})
- 确保 persist 插件配置了明确的
key，避免多个 store 冲突：
persist: {
key: 'pinia-theme',
paths: ['mode']
}
✅ 优点：无需主进程、不依赖 Electron，纯前端可跑，实时性好。
⚠️ 注意：该事件不会在触发修改的当前标签页中触发（这是浏览器规范），仅通知其他标签页。
进阶控制：避免冲突与敏感数据处理
真实业务中常遇到两个问题：多个标签页同时改同一字段导致覆盖；token 等敏感信息不能明文存在 localStorage：
- 加版本号防覆盖（可选）：在 state 中加
version: ref(0)，每次变更递增，storage 事件中比对版本决定是否覆盖 - 敏感字段单独处理：不要走 persist 插件自动序列化，改用
beforeRestore/afterRestore钩子加解密 - 临时状态隔离：表单草稿等不需跨页的数据，显式设
storage: sessionStorage，避免污染全局
例如：
persist: {
storage: sessionStorage, // 仅当前标签页有效
paths: ['draftContent']
}
不推荐的误区
❌ 以为 import 同一个 store 文件就能共享实例——实际是两份独立内存对象。
❌ 用 postMessage 或 BroadcastChannel 主动广播所有变更——开发复杂、易丢事件、难调试。
❌ 把大对象（如 Map、File、函数）直接存 localStorage——会丢失类型，序列化后变空或报错。
