Skip to content

持久化、插件与 SSR 隔离 ​

持久化是把状态跨刷新保存,不是把 store 全量序列化。先列字段生命周期:主题偏好可长期保存,编辑草稿可按版本保存,加载状态和错误应丢弃,访问令牌不应放在可被脚本读取的 localStorage 中。

选择性持久化与迁移 ​

ts
type PersistedCart = { version: 2; items: { id: string; quantity: number }[] }

function readCart(raw: string | null): PersistedCart {
  if (!raw) return { version: 2, items: [] }
  try {
    const value = JSON.parse(raw) as Partial<PersistedCart>
    if (value.version === 2 && Array.isArray(value.items)) return value as PersistedCart
    return migrate(value)
  } catch {
    return { version: 2, items: [] }
  }
}

迁移函数必须有版本号、默认值和损坏恢复路径。不要把用户权限从持久化数据中“恢复出来”:刷新后应重新向服务端确认身份和权限。插件适合统一做日志、选择性持久化和审计,但插件也应遵守字段白名单。

SSR 的隔离原则 ​

服务端每个请求都要创建自己的 Pinia 实例;把 createPinia() 放在模块级单例会让并发用户共享 state。服务端生成的初始状态只注入可公开且与当前请求绑定的数据,客户端 hydration 时再用同一份序列化结构接管。

练习 ​

设计一个 draft 持久化协议:版本从 1 升到 2,删除 token 字段,增加 updatedAt;给出旧数据、损坏 JSON 和跨用户登出的预期结果。

下一步 ​

完成练习后打开本章答案,再回到Pinia 课程总览。

用心记录每一步成长