Pinia Plugin Persistedstate

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 中儲存和設定的更多資訊，請參閱此處。

限制

有一些應該考量的限制，更多資訊請參閱此處。

貢獻

請參閱貢獻指南。