Vue Academy · 课时

Pinia 持久化与 DevTools

pinia-plugin-persistedstate、仅持久化指定字段，以及 Pinia DevTools 时间旅行

Pinia 持久化与 DevTools 是 CoddyKit 上的免费 Vue Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

持久化存储库状态

默认情况下，Pinia 状态会在页面重新加载时丢失。要保留状态，请使用 pinia-plugin-persistedstate 插件，该插件会将状态同步到 localStorage 或 sessionStorage。

安装插件

只需在 Pinia 实例上注册一次插件。之后，每个存储库都可以选择启用它。

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

在存储库上启用持久化

在存储库选项中设置 persist: true。现在，整个状态都会自动保存和恢复。

export const useUserStore = defineStore('user', {
  state: () => ({ name: '', token: '' }),
  persist: true
})

选择存储位置

storage 选项用于选择保存位置。对于应在标签页关闭时清除的数据，请使用 sessionStorage。

persist: {
  storage: sessionStorage
}

仅持久化部分字段

paths 选项用于限制要保存的状态键。这非常适合保留令牌，但不保存临时的界面标志。

persist: {
  paths: ['token', 'name'] // 'isLoading' not persisted
}

存储库序列化

持久化的实现方式是将状态序列化为 JSON。值必须符合 JSON 安全要求——普通对象、数组、字符串和数字。函数、Map 以及类实例需要自定义序列化器。

persist: {
  serializer: {
    serialize: JSON.stringify,
    deserialize: JSON.parse
  }
}

Pinia 开发者工具

安装 Vue 开发者工具后，Pinia 会添加一个专用面板。您可以检查每个存储库，实时查看状态变化，并直接编辑值。

时间旅行调试

每个操作都会显示在开发者工具的时间线中。您可以进行时间旅行：跳回之前的状态以重现错误，然后再逐步向前执行。

SSR 与存储库水合

在服务器端渲染中，服务器会填充存储库，然后客户端必须使用相同的数据进行水合，以确保标记匹配。状态不一致会导致水合警告。

在 Nuxt 中使用 Pinia

@pinia/nuxt 模块会将 Pinia 接入 Nuxt，并自动处理 SSR 水合。服务器渲染期间填充的状态会被序列化到页面中，并在客户端恢复。

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

结合持久化与 SSR

请注意：服务器上不存在 localStorage。持久化插件会检测这一点，并且只在客户端运行，因此 SSR 水合会使用服务器状态，之后再应用持久化层。

快速检查

请测试您对持久化和开发者工具的了解。

回顾

您已经学会持久化和工具使用：

pinia-plugin-persistedstate 会将状态保存到 localStorage 或 sessionStorage。
存储位置和路径选项控制保存的位置及内容。
状态会被序列化为 JSON，因此值必须符合 JSON 安全要求。
开发者工具支持实时检查和时间旅行；@pinia/nuxt 会处理 SSR 水合。

常见问题解答

「Pinia 持久化与 DevTools」课时是免费的吗？

是的 — 「Pinia 持久化与 DevTools」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「Pinia 持久化与 DevTools」这节课中我会学到什么？

pinia-plugin-persistedstate、仅持久化指定字段，以及 Pinia DevTools 时间旅行你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「Pinia 持久化与 DevTools」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy