Pinia 插件 Persistedstate

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

特性

使用受 vuex-persistedstate 启发的友好 API 持久化 Pinia 存储。
高度可定制（存储、序列化器、路径选择/省略）。
为 Nuxt 提供开箱即用的 SSR 友好支持。
非常小巧 (<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 选项添加到您想要持久化的存储

import { defineStore } from 'pinia'

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

配置

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

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 中存储和配置的更多信息，请点击这里。

局限性

应该考虑一些局限性，更多信息请点击这里。

贡献

请参阅贡献指南。