vuexサードパーティパッケージを使用してデータの永続性を実装する方法

目的：

vuex で管理されている状態データを同時にローカルに保存できるようにします。独自のストレージを用意する必要がなくなります。

• 開発プロセス中、ユーザー情報 (名前、アバター、トークン) を vuex とローカルに保存する必要があります。
• 他のモジュールも保存する必要がある場合は、それらもローカルに保存されます。

1) まず、vuex の状態の永続性をサポートするために、vuex プラグイン vuex-persistedstate をインストールする必要があります。

npm と vuex-persistedstate

2) 次に、src/store フォルダにモジュール ファイルを作成し、モジュールの下に user.js と cart.js を作成します。

src/store/modules/user.js

// ユーザーモジュールエクスポートデフォルト{
  名前空間: true、
  州 （） {
    戻る {
      // ユーザー情報プロファイル: {
        id: ''、
        アバター: ''、
        ニックネーム: ''、
        アカウント： ''、
        携帯： ''、
        トークン: ''
      }
    }
  },
  突然変異:
    // ユーザー情報を変更します。ペイロードはユーザー情報オブジェクトです。setUser (state, payload) {
      state.profile = ペイロード
    }
  }
}

3) 次に、src/store/index.js にユーザー モジュールをインポートします。

'vuex' から {createStore} をインポートします。

'./modules/user' からユーザーをインポートします

エクスポートデフォルトcreateStore({
  モジュール:
    ユーザー
  }
})

4) 最後に: 永続性のためにvuex-persistedstateプラグインを使用する

'vuex' から {createStore} をインポートします。
+ 'vuex-persistedstate' から createPersistedstate をインポートします

'./modules/user' からユーザーをインポートします

エクスポートデフォルトcreateStore({
  モジュール:
    ユーザー
  },
+ プラグイン: [
+ 永続状態を作成します({
+ キー: 'erabbit-client-pc-store',
+ パス: ['ユーザー']
+ })
+ ]
})

知らせ：

• ===> デフォルトではlocalStorageに保存されます
• ===> キーはデータを格納するためのキー名です
• ===> パスは状態に保存されるデータです。モジュール下の特定のデータの場合は、user.token のようにモジュール名を追加する必要があります。
• ===> ローカル ストレージ データの変更は、状態が変更されてトリガーされた後にのみ表示されます。

要約:

• サードパーティのパッケージに基づいてvuexでデータの永続性を実装する
• 持続性を誘発する条件は、状態が変化することである

これで、vuex サードパーティ パッケージを使用してデータ永続性を実装する方法についての記事は終了です。vuex データ永続性に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。