pinia-plugin-persistedstate Pinia 用の永続ストレージ プラグイン

インストール

1. お気に入りのパッケージ マネージャーを使用して依存関係をインストールします。

   • pnpm:

   pnpm i pinia-plugin-persistedstate

   • npm:

   npm i pinia-plugin-persistedstate

   • 糸：

   yarn add pinia-plugin-persistedstate

2. プラグインを pinia インスタンスに追加します

使用法

ストアを作成するときは、 persist オプションを に設定します true。

オプションの Store 構文を使用します。

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: '你好 pinia',
    }
  },
  persist: true,
})

または、Store 構文を組み合わせて使用​​します。

import { defineStore } from 'pinia'

export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('你好 pinia')
    return { someState }
  },
  {
    persist: true,
  }
)

これで、ストア全体がデフォルトの永続設定を使用して保存されます。

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

 例

 

piniaプラグインと連携してローカルデータ(localStorageなど)の保存、取得、削除を行います。

 公式ウェブサイト:ホーム | pinia-plugin-persistedstate