Pinia 持久化状态插件

插件用途: Pinia 插件Persistedstate用于持久化 Vue.js 应用的状态。

安装

安装 pinia 和 pinia-plugin-persistedstate

bash

npm install pinia-plugin-persistedstate

将插件添加到 pinia 实例:

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

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

使用

在 setup 函数中使用

import { defineStore } from "pinia"
import { ref } from "vue"

export const useStore = defineStore(
  "main",
  () => {
    const someState = ref("hello pinia")
    return { someState }
  },
  {
    persist: true,
  }
)

在 option 中使用

import { defineStore } from "pinia"

export const useStore = defineStore("main", {
  state: () => {
    return {
      someState: "hello pinia",
    }
  },
  persist: true,
})

配置

默认配置: 使用 localStorage 作为存储，使用 store.$id 作为存储的默认键，使用 JSON.stringify/destr 作为序列化/反序列化器。

import { defineStore } from "pinia"
import { ref } from "vue"

export const useStore = defineStore(
  "main",
  () => {
    const someState = ref("hello pinia")
    return { someState }
  },
  {
    persist: {
      // CONFIG OPTIONS HERE
    },
  }
)

key: 存储中引用反序列化数据的键。
storage: 用于持久化数据的存储，必须有 getItem 和 setItem 方法。
serializer: 自定义序列化器，用于在持久化前序列化数据，在反序列化前反序列化数据。
pick: 指定要持久化的点表示路径数组。
omit: 指定要省略的点表示路径数组。
beforeHydrate: 在使用持久化数据恢复存储状态前运行的钩子函数。
afterHydrate: 在持久化状态恢复后运行的钩子函数。
debug: 设置为 true 时，会在控制台记录持久化/恢复过程中的错误。

限制

同步存储: 自定义存储方法必须是同步的，因为 Pinia 的状态订阅是同步的。解决方法是订阅动作($onAction)来实现异步行为。
引用丢失: 序列化过程中引用会丢失，导致反序列化后对象的引用关系改变。解决方法是使用 pick 选项排除某些字段，并在 afterHydrate 钩子中重新填充，以恢复引用和响应性。
非原始类型: 非原始类型（如 Date）在序列化过程中会被转换为字符串，而不是作为对象重新水合。解决方法是使用 afterHydrate 钩子重新创建对象，或使用支持所需数据类型的自定义序列化器。

高级用法

全局持久化选项: 通过全局配置，可以为应用中所有存储设置默认持久化选项，如存储方式、序列化和调试等。
全局键选项: 可以设置一个全局键选项，通过函数返回新的存储键名，用于覆盖默认的存储键。
每个存储的多个持久化: 单个存储可以配置多个持久化选项，将数据持久化到不同的存储中，但需注意数据一致性问题。
强制恢复: 通过$hydrate 方法，可以手动触发存储数据的恢复，并可选择是否触发钩子。
强制持久化: 通过$persist 方法，可以手动触发存储的持久化，但通常无需手动操作，除非有特定需求

Pinia 持久化状态插件 ​

安装 ​

使用 ​

配置 ​

限制 ​

高级用法 ​

Pinia 持久化状态插件

安装

使用

配置

限制

高级用法