Pinia Plugin 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におけるストレージと設定の詳細についてはこちら。

制限事項

考慮すべきいくつかの制限事項があります。詳細はこちら。

貢献

貢献ガイドをご覧ください。