Pinia 插件与持久化：缓存与登录态

纯内存里的 store 一刷新就丢，线上又要 登录态、草稿、用户偏好。
这篇围绕 插件机制 和 持久化 讲：Pinia 插件能做什么、持久化常见落点、以及和 SSR/安全相关的边界。

pinia.use(plugin) 在应用级注册，插件一般可以：

  • 在 store 创建后 做增强（订阅 mutation、包装 $subscribe）；
  • 给每个 store 挂辅助方法；
  • 集中处理 日志、埋点、错误上报。

心智模型：

  • 插件是 横切能力，不要把核心业务规则全写进插件里，否则难测。

常见需求：

  • access token / refresh 策略（具体存哪、是否进 httpOnly cookie 由安全方案决定，Pinia 只是一层）；
  • 用户偏好（主题、语言）；
  • 表单草稿（编辑器类页面）。

原则：

  • 能少存就少存：敏感信息优先短生命周期 + 服务端会话；
  • 存之前想清楚版本：schema 一变，要有迁移或清理策略。

实现上常见两种：

  • 手写 subscribe + localStorage；
  • 使用社区 persist 插件（注意包维护与 Vue/Pinia 版本匹配）。

localStorage 持久化后：

  • 多 Tab 同时写可能互相覆盖；
  • 另一 Tab 登出 后，当前 Tab 仍可能读到旧内存。

要有意识：

  • storage 事件或 BroadcastChannel 做 跨 Tab 同步；
  • 或对关键字段 每次启动向服务端校验。

服务端渲染时：

  • 不能把 window 当永远存在；
  • 水合前后 state 要一致，否则出现闪烁或错状态。

具体模式以 Nuxt + Pinia 官方文档 为准，这里只强调：持久化逻辑要分环境分支。

  • 插件适合 观测、增强、统一策略；
  • 持久化要同时考虑 安全、版本、多 Tab、SSR；
  • 登录态 最终应以服务端会话与传输层策略为准，store 只是前端表现层。

下一篇专门讲 TypeScript 与类型工程化。