怎样利用 Pinia 实现跨页面的状态持久化？

Pinia 本身不自带持久化能力，状态默认存在内存中，页面刷新就清空；需借助插件如 pinia-plugin-persistedstate（H5）或 pinia-plugin-unistorage（UniApp）实现自动存取本地存储，通过声明式配置 persist 字段控制字段级持久化，并注意 JSON 序列化限制与平台存储差异。

Pinia 本身不自带持久化能力，状态默认存在内存中，页面刷新就清空。要实现跨页面（包括刷新、关闭再打开）的状态持久化，核心是把关键 state 自动存到本地存储，并在应用启动时自动读取还原。

选对插件：按运行环境决定用哪个

不同平台的本地存储 API 不一样，不能直接套用 localStorage：

• H5 网页项目：用 pinia-plugin-persistedstate，它默认对接 localStorage，开箱即用
• UniApp 跨端项目（小程序 / App / H5）：必须用 pinia-plugin-unistorage 或 pinia-plugin-persist-uni，它们能自动识别当前平台（比如小程序调用 uni.setStorageSync，H5 调用 localStorage），统一处理存储逻辑

声明式配置：只在需要持久化的 store 里加 persist 字段

不是所有状态都需要存——比如临时搜索关键词、动画开关就不必。只对登录信息、用户偏好、购物车等关键数据开启持久化。配置方式很直观：

export const useUserStore = defineStore('user', {  state: () => ({    token: '',    userInfo: null,    theme: 'light'  }),  persist: {    enabled: true,    // 可指定只存哪些字段（避免存大对象或敏感信息）    paths: ['token', 'userInfo', 'theme']  }})

插件会在 state 变更时自动写入，应用初始化时自动从本地读取并合并进 store，开发者不用手动调用 setItem / getItem。

注意序列化与平台限制

本地存储只能存字符串，插件内部会自动 JSON 序列化，但你要避开不能被 JSON 安全转换的内容：

• 函数、Promise、Date 对象、RegExp 等会被丢弃或转成空对象
• 小程序对单次 storage 大小有限制（通常 10MB），避免把整张图片 Base64 存进去
• 敏感信息如 token 建议配合加密（可自定义序列化器，在 persist 配置里加 serializer 选项）

验证是否生效的小技巧

别只靠“刷新看还在不在”来判断，建议主动检查：

• 打开浏览器开发者工具 → Application → LocalStorage，看对应 key 是否有值
• 在 store 的 onMounted 或 setup 中打印 store.$state，确认初始化后已加载本地数据
• 修改 state 后稍等片刻（插件有防抖，默认延迟 100ms 写入），再刷新页面观察一致性