pinia-plugin-persistedstate
pinia-plugin-persistedstate

Pinia 存储的可配置持久化和状态恢复。
1.4M 次下载2.5K 颗星v4.5.0
prazdevsprazdevs

Pinia 持久化插件

Pinia 存储的可配置持久化和状态恢复。

npm minizipped size license

文档

功能

  • 通过受 vuex-persistedstate 启发且友好的 API 来持久化 Pinia 存储。
  • 高度可定制（存储、序列化器、路径选择/忽略）。
  • 对 Nuxt 提供开箱即用的 SSR 友好支持。
  • 非常小巧（压缩后小于 2KB）。

快速入门

  1. 使用您喜欢的包管理器安装
    • pnpm : pnpm add pinia-plugin-persistedstate
    • npm : npm i pinia-plugin-persistedstate
    • yarn : yarn add pinia-plugin-persistedstate
  2. 将插件添加到 Pinia
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
  1. 为您希望持久化的存储添加 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 中存储和配置的更多信息，请参阅此处。

局限性

需要考虑一些限制，更多信息请参阅此处。

贡献

请参阅贡献指南。

许可证

MIT © 2021-至今 Sacha Bouillez