持久化Pinia状态：探索Pinia-plugin-persistedstate的魔力

pinia-plugin-persistedstate

pinia-plugin-persistedstate 旨在通过一致的 API 为每个人和每个项目中的 Pinia Store 提供持久化存储。如果你希望保存一个完整的 Store，或者需要细粒化配置 storage 和序列化的方式，该插件都为你提供了相应的功能，并且可以在你想要持久化的 Store 上使用相同的配置。这意味着，通过此插件，你可以将某些状态数据保存在浏览器的localStorage或sessionStorage中，从而确保在页面刷新或浏览器重启后，这些数据仍能被恢复和保持。

使用pinia-plugin-persistedstate

1.安装插件

yarn add pinia-plugin-persistedstate

2.添加插件

//main.js 
import { createPinia } from 'pinia' 
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' 

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

3.使用插件

在创建的store中，将 persist 设置为true，这个store将会使用默认持久化配置。

默认持久化配置：

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

import { defineStore } from 'pinia' 
export const useStore = defineStore('main', { 
    state: () => { 
        return { 
            name: 'lanlan', 
        } 
    }, 
    persist: true, 
})

配置pinia-plugin-persistedstate

1. key

默认值：store.$id

即为存储时的key

2. storage

默认值：localStorage

即数据存储的位置。

3. paths

默认值：undefined 类型：string[ ]

用于指定state中哪些数据需要持久化存储。 空数据代表不持久化任何状态，undefined和null表示持久化整个state。

4. serializer

默认值：JSON.stringify / JSON.parse

配置持久化时所使用的序列化方法，以及回复store时的反序列化方法。另外，必须具有serialize和deserialize方法。不能只配置一个。

5. beforeRestore & afterRestore

默认值：undefined

将在从storage中恢复数据之前触发，并且它可以访问整个PiniaPluginContext，可以在恢复数据之前/之后进行一些操作。

6. debug

默认值：false

设置为true时，持久化/恢复 Store 时可能发生的任何错误都将使用console.error输出

局限性

• 存储必须是同步的。当提供自定义 storage 时，其方法必须是同步的，这是因为 Pinia 的状态订阅是同步的(与 mutations 一致)。
• 基本类型之外的以及引用的将不会被持久化。由于数据将会被序列化，因此非基本类型（如Date）不会以 Date 对象形式存储，而是作为 string 存储。

用例

import { defineStore } from 'pinia'

export const useStore = defineStore('store', {
    state: () => ({
        save: {
            name: '岚',
            age: '11',
        },
        saveToo: '山风',
    }),
    persist: {
        key: 'save_store_state', // store将会被持久化存储在storage中的'save_store_state' key中
        storage: sessionStorage, // store将会被存储在sessionStorage中
        paths: ['save.name', 'saveToo'], // 只会存储save.name以及saveMeToo的数据，save.age的数据将不会被持久化存储
        serialize: stringify, // 该store将会使用zipson的stringify处理序列化，并进行压缩
        deserialize: parse, // 该store将会使用zipson的parse处理反序列化，并进行压缩
        beforeRestore: (ctx) => {
            console.log(`即将恢复 '${ctx.store.$id}'`)
        }, // 该store将会在回复数据之前执行
        afterRestore: (ctx) => {
            console.log(`刚刚恢复完 '${ctx.store.$id}'`)
        }, // 该store将会在回复数据之后执行
        debug: true, // 持久化或回复store时可能发生的任何错误都将使用console.error输出。
    },
    //每个 Store 可以有多个持久化配置
    persist: [
        {
            paths: ['save.name'], // 这种配置时必须要指明path，不然会在恢复数据时造成差异
            storage: localStorage,
        },
        {
            paths: ['saveToo'],
            storage: sessionStorage,
        },
    ],
    // 下面这种情况时，恢复数据后，从 sessionStorage 取回的数据将替换从 localStorage 取回的数据
    persist: [
        {
            storage: localStorage,
        },
        {
            storage: sessionStorage,
        },
    ],
})

全局配置

可以使用CreatePersistedState来初始化插件。这时这些配置将会成为所有store的默认值（也被叫做工厂函数）。但是传递给单个 Store 的 persist 配置的任何选项都将覆盖全局配置中声明的对应项。

例子：

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

const pinia = createPinia()

pinia.use(
    createPersistedState({
        storage: sessionStorage, //每个声明 persist: true 的 Store 都会默认将数据持久化到 sessionStorage 中
        key: id => `__persisted__${id}`, //store 将保存在 __persisted__store key 下，而不是 store 下
        auto: true, //将会使所有Store持久化存储，并且需要配置persist：false显示禁用持久化
    })
)

pinia-plugin-persistedstate主要特点

1. 持久化存储：pinia-plugin-persistedstate可以将Pinia的状态数据持久化到浏览器的localStorage或sessionStorage中，确保数据在页面刷新或浏览器重启后不被丢失。。
2. 自定义序列化与反序列化：当需要保存的数据不能直接支持本地存储时（如日期对象或自定义对象），pinia-plugin-persistedstate允许开发者自定义序列化和反序列化逻辑，以满足特定需求。
3. 简单易用：该插件受到vuex-persistedstate的启发，提供了类似且简单的API，使得开发者能够轻松地在Pinia中使用它。
4. 高度可定制性：pinia-plugin-persistedstate支持丰富的配置选项，如存储键的前缀、要持久化的状态属性等，开发者可以根据项目需求进行灵活配置。