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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vuex データの永続化のための 2 つの実装ソリューション
  • Vuex データの永続性を実装するためのアイデアとコード
  • VUEX データの永続性、リフレッシュ後の再取得の例
  • Vuexはデータ状態の永続性を実装します
  • シンプルなvuex永続化ツールを実装する方法
  • vueの実践的な応用におけるvuexの永続性の詳細な説明

<<:  最小限の展開で CentOS8 に OpenStack Ussuri をインストールする方法の詳細なチュートリアル

>>:  MySQLデータベースの使用仕様の概要

推薦する

ネイティブ JavaScript メッセージボード

この記事では、参考までにメッセージボードを実装するためのJavaScriptの具体的なコードを紹介し...

React でインデックスをキーとして使用することが推奨されないのはなぜですか?

1. 古い仮想DOMと新しい仮想DOMを比較し、まずキーが同じかどうかを確認します。 2. 引き続...

コンテンツの位置をランダムにドラッグするHTMLを実装する2つの方法

テスト: Chrome v80.0.3987.122 は正常です方法は2つあります。通常のラベルの位...

画像の一時停止を実現するjQueryプラグイン

この記事では、画像の一時停止を実現するためのjQueryプラグインの具体的なコードを参考までに共有し...

mysql8.0.23 msi インストールの超詳細なチュートリアル

1.MySqlをダウンロードしてインストールする公式ウェブサイトからMySqlデータベースをダウンロ...

MySQL の NULL 値に関する体験談と分析チュートリアルシリーズ

目次1. テストデータ2. ヌル値による不便3. スペース、空の値、null をどのように判断すれば...

Nginx の書き換え正規マッチング書き換え方法の例

Nginx の書き換え機能は、リダイレクトと同様に、URL アドレスを一時的または永続的に新しい場所...

CSS子要素選択親要素の実装

通常、CSS セレクターは上から下に選択し、親要素を介して子要素を選択します。では、子要素を介して親...

MySQLプロセス関数の一般的な使用例の分析

この記事では、例を使用して MySQL プロセス関数の一般的な使用方法を説明します。ご参考までに、詳...

MySQL Shell import_tableデータインポートの実装

目次1. import_tableの紹介2. データのロードとテーブル関数のインポートの例2.1 L...

インデックスを使用して MySQL ORDER BY ステートメントを最適化する方法

テーブルの作成とインデックスの作成 テーブルtbl1を作成( id int ユニーク、sname v...

MySQL Installer Community 5.7.16 インストール詳細チュートリアル

この記事では、MySQL インストールの詳細なチュートリアルを記録し、全員と共有します。 1. バー...

さまざまなブラウザに対応するためにCSSで指定フォント@font-faceを導入する際の問題

Web ページを作成するときに、特定のフォントを使用したい場合は、 @font-faceを介して参照...

Vue における $router と $route の違いの詳細な説明

通常、vue プロジェクトではルーティングを使用します。vue-router は vue.js の公...

CSSにスティッキー効果を追加する方法

前面に書かれたfilter:blur と filter:contrast がこのような素晴らしい化学...