Pinia Plugin Persistedstate

Pinia 状态存储的可配置持久化和重新水合。

特性

使用友好的 API 持久化 Pinia 状态存储，灵感来源于 vuex-persistedstate。
高度可定制 (存储、序列化器、路径选择/忽略)。
开箱即用的 SSR 友好支持 Nuxt。
非常小巧 (<2kB 压缩后)。

快速开始

使用您喜欢的包管理器安装
- pnpm : pnpm add 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)

将 persist 选项添加到您想要持久化的 store

import { defineStore } from 'pinia'

export const useStore = defineStore('store', {
  state: () => ({
    someState: 'hello pinia',
  }),
  persist: true,
})

配置

您可以通过为 persist 属性指定选项来配置 store 的持久化方式

export const useStore = defineStore('store', () => {
  const someState = ref('hello pinia')
  return { someState }
}, {
  persist: {
    storage: sessionStorage,
    pick: ['someState'],
  },
})

所有可用的配置选项都在这里进行了解释。

在 Nuxt 中使用

得益于内置的模块，Nuxt 开箱即用即可支持。您只需要安装包并将模块添加到您的 nuxt.config.ts 中，如下所示

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt', // required
    'pinia-plugin-persistedstate/nuxt',
  ],
})

更多关于 Nuxt 中存储和配置的信息请见此处。

局限性

有一些应该考虑的局限性，更多信息请见此处。

贡献

请参阅贡献指南。