Pinia 插件持久化状态

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

特性

使用受 vuex-persistedstate 启发的友好 API 持久化 Pinia 存储。
高度可定制（存储、序列化器、路径选择/省略）。
开箱即用的 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 选项添加到您希望持久化的存储中

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

限制

应该考虑一些限制，更多信息请点击此处。

贡献

请查看贡献指南。