[pinia 永続ストレージ] データの永続ストレージに依存するには、pinia と pinia-plugin-persistedstate を使用します。

簡単に言うと

データの永続的なストレージには、pinia および pinia-plugin-persistedstate の依存関係を使用します。
保管方法：

• ローカルストレージ
• セッションストレージ

pinia-plugin-persistedstate中国語公式ウェブサイト

ピニア中国語公式ウェブサイト

インストール

pinia をインストールして使用するには、 pinia の使用に関する記事を参照してください。

pinia-plugin-persistedstate をインストールします。

npm i pinia-plugin-persistedstate
# 或
pnpm i pinia-plugin-persistedstate
# 或
yarn add pinia-plugin-persistedstate

pinia-plugin-persistedstate 永続ストレージを使用する

マウント

使用前に pinia-plugin-persistedstate を pinia インスタンスに追加します。

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

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

追加する場合、パラメータを追加して pinia-plugin-persistedstate のデフォルト設定を変更できます。次に例を示します。

pinia.use(piniaPluginPersistedstate({
    
    
	auto:true,	//	该配置将会使所有 Store 持久化存储，且必须配置 persist: false 显式禁用持久化。
    storage: sessionStorage,	//	默认持久化存储方式 修改为 sessionStorage
  })

上記の変更のデフォルト設定では、すべてのストアの永続ストレージが有効になり、デフォルトのストレージ メソッドは sessionStorage です。

店頭で使用する

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

import {
    
     defineStore } from 'pinia'

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

または

import {
    
     defineStore } from 'pinia'

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

上記のストア内のすべてのデータは、デフォルト構成を使用して永続的に保存されます。

デフォルトの割り当て

• ストレージには localStorage を使用する
• ストレージのデフォルトキーとしてstore.$id
• JSON.stringify/JSON.parse を使用したシリアル化/逆シリアル化
• デフォルトでは状態全体が保持されます

パーソナライズされた構成

persist はオブジェクトにすることができます。

import {
    
     defineStore } from 'pinia'

export const useStore = defineStore('main', {
    
    
  state: () => ({
    
    
    someState: '你好 pinia',
  }),
  persist: {
    
    
    // 在这里进行自定义配置
  },
})

永続オブジェクトは次のプロパティを使用して構成できます。

• キー
  の種類: 文字列
  デフォルト値: store.$id
  キーはストレージ内のデータを参照するために使用されます
• ストレージの
  種類: StorageLike
  デフォルト値: localStorage
  データを永続化するストレージには、 getItem: (key: string) => string | null および setItem: (key: string, value: string) => void の 2 つのメソッドが必要です。
• パス
  タイプ: string[]
  デフォルト値: 未定義
  状態内のどのデータを保持する必要があるかを指定するために使用されます。[] は状態を保持しないことを意味し、未定義または null は状態全体を保持することを意味します。
• シリアライザー
  の種類: Serializer
  デフォルト値: JSON.stringify/JSON.parse
  この構成では、永続化に使用されるシリアル化メソッドと Store を復元するための逆シリアル化メソッドを指定できます。また、serialize: (value: StateTree) => string メソッドと deserialize: (value: string) => StateTree メソッドも必要です。
• beforeRestore
  タイプ: (コンテキスト: PoniaPluginContext) => void
  デフォルト値: 未定義
  このフックは storage からデータを復元する前にトリガーされ、PoniaPluginContext 全体にアクセスでき、データを復元する前に特定の操作を強制するために使用できます。
• afterRestore
  タイプ: (コンテキスト: PoniaPluginContext) => void
  デフォルト値: 未定義
  このフックは storage からデータを復元した後にトリガーされ、PoniaPluginContext 全体にアクセスでき、データの復元後に特定の操作を強制的に実行するために使用できます。
• デバッグ
  タイプ: ブール値
  デフォルト値: false
  true に設定すると、ストアの永続化/復元時に発生する可能性のあるエラーは console.error を使用して出力されます。

例

/*
 * @Date: 2022-11-30 17:26:39
 * @LastEditors: zhangsk
 * @LastEditTime: 2023-04-14 11:26:46
 * @FilePath: \basic-demo\src\store\index.ts
 * @Label: Do not edit
 */
import {
    
     defineStore } from 'pinia'

export const useStore = defineStore('main', {
    
    
  //  类似data
  state: () => {
    
    
    return {
    
    
      userInfo: localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo') as string) : undefined,
      token: undefined as string | undefined,
      num: 1,
    }
  },
  //  类似计算属性
  getters: {
    
    
    getNum2: (state) => state.num * 2
  },
  // 类似methods
  actions: {
    
    
    setUserInfo(info = null) {
    
    
      this.userInfo = info || undefined
      console.log(info);

      localStorage.setItem('userInfo', JSON.stringify(info))
    }
  },
  persist: {
    
    
    paths: ['num'],
    storage: sessionStorage,
    key: 'my_num'
  }
})

[注意] この永続ストレージは自動的に保存されますが、いつ保存されますか? ストアご利用時。

データの選択的な永続化

ほとんどの場合、ストア内のデータはデータの一部を保存するだけで済みます。
persist は配列も受け入れます。オプションでいくつかのデータを保存できます

import {
    
     defineStore } from 'pinia'

defineStore('store', {
    
    
  state: () => ({
    
    
    toLocal: '',
    toSession: '',
    toNowhere: '',
  }),
  persist: [
    {
    
    
      paths: ['toLocal'],
      storage: localStorage,
    },
    {
    
    
      paths: ['toSession'],
      storage: sessionStorage,
    },
  ],
})

例：

/*
 * @Date: 2022-11-30 17:26:39
 * @LastEditors: zhangsk
 * @LastEditTime: 2023-04-14 13:42:52
 * @FilePath: \basic-demo\src\store\index.ts
 * @Label: Do not edit
 */
import {
    
     defineStore } from 'pinia'

export const useStore = defineStore('main', {
    
    
  //  类似data
  state: () => {
    
    
    return {
    
    
      userInfo: localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo') as string) : undefined,
      token: 'aaxswkjaoksjdohasdh' as string | undefined,
      num: 1,
    }
  },
  //  类似计算属性
  getters: {
    
    
    getNum2: (state) => state.num * 2
  },
  // 类似methods
  actions: {
    
    
    setUserInfo(info = null) {
    
    
      this.userInfo = info || undefined
      console.log(info);

      localStorage.setItem('userInfo', JSON.stringify(info))
    }
  },
  persist: [
    {
    
    
      paths: ['num'],
      storage: sessionStorage,
      key: 'my_num'
    },
    {
    
    
      paths: ['token'],
      key: 'token',
      storage: localStorage
    },
  ]
})

知らせ

データはシリアル化されるため、Date などの非プリミティブ型は Date オブジェクトとしてではなく、文字列として保存されます。
カスタム ストレージを提供する場合、そのメソッドは同期的である必要があります。これは、Ponia の状態サブスクリプション ($subscribe) が同期的 (ミューテーションと一貫性がある) であるためです。

エピローグ

終わりました。