pinia-plugin-persistedstate

Piniaストアの設定可能な永続化と再水和。

140万ダウンロード•2.5千スター•v4.5.0

prazdevs

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でのストレージと設定に関する詳細情報はこちら。

制限事項

いくつかの考慮すべき制限事項があります。こちらで詳細をご覧ください。

コントリビューション

貢献ガイドを参照してください。