Pinia持久化插件

pinia-plugin-persistedstate 是一个 Pinia 插件，用于持久化 Pinia store 的状态到本地存储（如 localStorage 或 sessionStorage）。以下是关于 pinia-plugin-persistedstate 的使用及配置的详细说明：

使用步骤

1. 安装插件
   使用以下命令安装 pinia-plugin-persistedstate：

   pnpm add pinia-plugin-persistedstate -D
   

2. 创建 Pinia Store
   使用 defineStore 创建一个 Pinia store。

3. 配置插件
   在 store 的定义中配置 persist 属性来启用持久化。

配置选项

以下是 pinia-plugin-persistedstate 的配置选项：

• key
  类型：string

  默认值：store.$id

  用于引用 storage 中的数据的键名。

  persist: {
    key: 'my-custom-key',
  }
  

• storage
  类型：StorageLike

  默认值：localStorage

  指定数据持久化的存储介质。必须具有 getItem 和 setItem 方法。

  persist: {
    storage: sessionStorage,
  }
  

• pick
  类型：string[]

  默认值：undefined

  指定 state 中哪些数据需要被持久化。空数组表示不持久化任何状态，undefined 或 null 表示持久化整个 state。

  persist: {
    pick: ['save.me', 'saveMeToo'],
  }
  

• serializer
  类型：Serializer

  默认值：JSON.stringify/JSON.parse

  用于指定持久化时所使用的序列化方法和恢复 Store 时的反序列化方法。

  persist: {
    serializer: {
      serialize: (state) => JSON.stringify(state),
      deserialize: (data) => JSON.parse(data),
    },
  }
  

• beforeHydrate
  类型：(context: PiniaPluginContext) => void

  默认值：undefined

  在从 storage 中恢复数据之前触发的 hook。

  persist: {
    beforeHydrate: (context) => {
      // 执行某些操作
    },
  }
  

• afterHydrate
  类型：(context: PiniaPluginContext) => void

  默认值：undefined

  在从 storage 中恢复数据之后触发的 hook。

  persist: {
    afterHydrate: (context) => {
      // 执行某些操作
    },
  }
  

• debug
  类型：boolean

  默认值：false

  当设置为 true 时，会输出持久化/恢复 Store 时可能发生的任何错误。

  persist: {
    debug: true,
  }
  

完整示例

下面是一个包含所有配置选项的完整示例：

import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useStore = defineStore('main', {
  state: () => ({
    save: {
      me: 'saved',
      notMe: 'not-saved',
    },
    saveMeToo: 'saved',
  }),
  persist: {
    key: 'my-custom-key',
    storage: sessionStorage,
    paths: ['save.me', 'saveMeToo'],
    serializer: {
      serialize: (state) => JSON.stringify(state),
      deserialize: (data) => JSON.parse(data),
    },
    beforeHydrate: (context) => {
      // 在恢复数据之前执行操作
    },
    afterHydrate: (context) => {
      // 在恢复数据之后执行操作
    },
    debug: true,
  },
})

以上配置将只持久化 save.me 和 saveMeToo 状态，并使用 sessionStorage 作为存储介质。同时，它将使用自定义的序列化/反序列化方法，并在恢复数据前后执行特定的操作，并且开启调试模式。

简化配置

{ persist: true }

当你使用 { persist: true } 配置 pinia-plugin-persistedstate 插件时，以下是最基本的默认设置：

• 存储介质 (storage): localStorage。这是默认的存储位置，用于持久化状态。
• 存储键名 (key): store.$id。这是默认的键名，用于在存储介质中引用数据。$id 是你定义 store 时提供的唯一标识符。
• 序列化/反序列化方法 (serializer): 默认使用 JSON.stringify 和 JSON.parse 方法。这些方法用于将状态转换为字符串以便存储，并在读取时将其转换回 JavaScript 对象。
• 持久化状态路径 (paths): undefined。这意味着整个 store 的状态将被持久化，除非你明确指定哪些路径应该被持久化。
• 调试模式 (debug): false。默认情况下，调试模式是关闭的，错误不会输出到控制台。
• 在恢复之前和之后的钩子 (beforeRestore 和 afterRestore): undefined。默认情况下，不会执行任何在恢复数据之前或之后的操作。

更新说明：path->pick，beforeRestore->beforeHydrate，afterRestore->afterHydrate