pinia中持久化配置详细讲解

Pinia 是 Vue.js 的状态管理库，它提供了一种简单而直观的方式来管理应用的状态。Pinia 的持久化配置主要通过 pinia-plugin-persistedstate 插件来实现，以下是详细的配置说明：

1. 安装插件

首先，你需要安装 pinia-plugin-persistedstate 插件：

npm i pinia-plugin-persistedstate
# 或
pnpm i pinia-plugin-persistedstate
# 或
yarn add pinia-plugin-persistedstate

2. 挂载插件

在你的 Pinia 实例中使用该插件：

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

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

你还可以传递参数来修改插件的默认配置，例如：

pinia.use(piniaPluginPersistedstate({
  auto: true, // 使所有 Store 持久化存储，且必须配置 persist: false 显式禁用持久化。
  storage: sessionStorage // 将默认持久化存储方式修改为 sessionStorage
}))

3. Store 上使用

在创建 Store 时，将 persist 选项设置为 true 以启用持久化：

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => ({
    someState: '你好 pinia',
  }),
  persist: true,
})

在 Pinia 中使用组合式 API 进行状态管理：

在创建 Store 时，将 persist 选项设置为 true 以启用持久化：

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

export const useStore = defineStore('main', () => {
  const someState = ref('你好 pinia')
  return { someState }
}, {
  persist: true,
})

4. 默认配置

• 使用 localStorage 进行存储。
• store.$id 作为 storage 默认的 key。
• 使用 JSON.stringify/JSON.parse 进行序列化/反序列化。
• 整个 state 默认将被持久化。

5. 个性化配置

persist 可以是一个对象，允许你自定义持久化行为：

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => ({
    someState: '你好 pinia',
  }),
  persist: {
    key: 'custom-key', // 自定义 storage 中的 key
    storage: localStorage, // 自定义存储方式
    paths: ['someState'], // 指定哪些状态需要被持久化
    serializer: {
      serialize: (value) => JSON.stringify(value),
      deserialize: (value) => JSON.parse(value)
    },
    beforeRestore: (context) => {}, // 从 storage 恢复数据之前触发
    afterRestore: (context) => {} // 从 storage 恢复数据之后触发
  }
})

在 Pinia 中使用组合式 API 进行状态管理：

persist 可以是一个对象，允许你自定义持久化行为：

import { defineStore } from 'pinia'

export const useStore = defineStore('main', () => {
  const someState = ref('你好 pinia')
  return { someState }
}, {
  persist: {
    key: 'custom-key', // 自定义 storage 中的 key。
    storage: localStorage, // 自定义存储方式。
    paths: ['someState'], // 指定哪些状态需要被持久化。
    serializer: {
      serialize: (value) => JSON.stringify(value),
      deserialize: (value) => JSON.parse(value)
    },
    beforeRestore: (context) => {}, // 从 storage 恢复数据之前触发。
    afterRestore: (context) => {} // 从 storage 恢复数据之后触发。
  }
})

6. 常用自定义配置项

• key：用于引用 storage 中的数据，默认为 store.$id。
• storage：将数据持久化到的 storage 中，必须具有 getItem 和 setItem 方法。
• paths：指定 state 中哪些数据需要被持久化。
• serializer：指定持久化时所使用的序列化方法，以及恢复 Store 时的反序列化方法。
• beforeRestore 和 afterRestore：在恢复持久化数据前后的 hook。

通过这些配置，你可以灵活地控制 Pinia 中状态的持久化行为，以满足不同的应用需求。