Pinia Plugin Persistedstate

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

功能

使用友善的 API 持久化 Pinia stores，靈感來自 vuex-persistedstate。
高度可自訂 (storage, serializer, 路徑選擇/省略)。
開箱即用的 SSR 友善支援 Nuxt。
非常小巧 (<2kB minzipped)。

快速開始

使用您最喜歡的套件管理器安裝
- 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 中 storages 和配置的更多資訊，請參閱這裡。

限制

有一些應該考慮的限制，更多資訊請參閱這裡。

貢獻

請參閱貢獻指南。