pinia-plugin-persistedstate

适用于 Pinia 的持久化存储插件

优点

简单易用

受 vuex-persistedstate 的启发而创建，你可以在 Pinia 上使用类似简单并且熟悉的 API。

高度可定制性

你可以自定义存储方式，自定义序列化配置和存储目标，并且可以对每个 Store 进行单独配置。

随处可用

兼容 Vue2 和 3、Nuxt（SSR）以及所有可以使用 Pinia 的产品。

概述

本插件兼容 pinia^2.0.0，在使用之前请确保你已经安装 Pinia。 pinia-plugin-persistedstate 丰富的功能可以使 Pinia Store 的持久化更易配置：

与 vuex-persistedstate 相似的 API
所有 Store 均可单独配置
自定义 storage 和数据序列化
恢复持久化数据前后的 hook
每个Store具有丰富的配置

安装

用你喜欢的包管理器安装依赖：

pnpm:

pnpm i pinia-plugin-persistedstate

npm:

npm i pinia-plugin-persistedstate

yarn:

yarn add pinia-plugin-persistedstate

将插件添加到pinia实例上

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

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

用法

创建 Store 时，将 persist 选项设置为 true。

使用选项式 Store 语法：

import { defineStore } from 'pinia'

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

或者使用组合式 Store 语法：

import { defineStore } from 'pinia'

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

现在，你的整个 Store 将使用默认持久化配置保存。

配置

该插件的默认配置如下:

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

如何你不想使用默认的配置，那么你可以将一个对象传递给 Store 的 persist 属性来配置持久化。

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => ({
    someState: '你好 pinia',
  }),
  persist: {
    // 在这里进行自定义配置
  },
})

key

Key 用于引用 storage 中的数据

import { defineStore } from 'pinia'

export const useStore = defineStore('store', {
  state: () => ({
    someState: '你好 pinia',
  }),
  persist: {
    key: 'my-custom-key',
  },
})

这个 Store 将被持久化存储在 localStorage 中的 my-custom-key key 中。

paths

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

import { defineStore } from 'pinia'

export const useStore = defineStore('store', {
  state: () => ({
    save: {
      me: 'saved',
      notMe: 'not-saved',
    },
    saveMeToo: 'saved',
  }),
  persist: {
    paths: ['save.me', 'saveMeToo'],
  },
})

该 store 中, 只有 save.me 和 saveMeToo 被持久化，而 save.notMe 不会被持久化。

serializer

该配置能够指定持久化时所使用的序列化方法，以及恢复 Store 时的反序列化方法。另外，必须具有 serialize: (value: StateTree) => string 和 deserialize: (value: string) => StateTree 方法。

import { defineStore } from 'pinia'
import { parse, stringify } from 'zipson'

export const useStore = defineStore('store', {
  state: () => ({
    someState: '你好 pinia',
  }),
  persist: {
    serializer: {
      deserialize: parse,
      serialize: stringify,
    },
  },
})

该 store 将使用 zipson 的 stringify/parse 处理序列化/反序列化，并进行压缩。

debug

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

另外还有一些有局限性和意外的配置我就不写了，大家可以去官网配置 | pinia-plugin-persistedstate (prazdevs.github.io)了解一下

pinia-plugin-persistedstate(基础)