vuex データの永続化のための 2 つの実装ソリューション

vuex データの永続化のための 2 つの実装ソリューション

ビジネス要件:

Vue をベースに SPA プロジェクトを開発する場合、ページの更新後にデータが失われる問題を解決するために、通常はデータをローカルストレージまたはセッションストレージに保存します。データをグローバルに処理して均一に管理する必要がある場合は、Vue が公式に提供する vuex を使用してデータを均一に管理します。 localstorage や sessionstorage と比較すると、vuex はデータの保存においてより安全です。同時に、vuex にはいくつかの欠点もあります。ページが更新されると、vuex の状態に保存されているデータも更新されます。vuex に保存されているデータは永続化できず、vuex に保存されているデータ状態の永続性を維持するために監視処理が必要です。

ページが更新された後、vuex に保存されたデータの状態が永続化できないという問題を解決するために、私が採用した解決策は、サードパーティのプラグイン ツールを使用して vuex データの永続的な保存を実現し、ページが更新された後のデータ更新の問題を解決することです。

解決策 1: vuex-persistedstate

プラグインをインストールする

糸にvuex-persistedstateを追加する
// または npm install --save vuex-persistedstate

使い方

「vuex」からVuexをインポートします。
// プラグインをインポートします。 import createPersistedState from "vuex-persistedstate";

Vue.js で Vuex をビルドします。

定数状態 = {};
const 変異 = {};
定数アクション = {};

定数ストア = 新しい Vuex.Store({
	州、
	突然変異、
	行動、
  /* vuex データ永続化設定 */
	プラグイン: [
		永続状態を作成します({
      // ストレージメソッド: localStorage、sessionStorage、cookies
			ストレージ: window.sessionStorage、
      // 保存されたキーのキー値 key: "store",
			レンダリング(状態) {
        //保存するデータ: このプロジェクトでは、es6 拡張演算子を使用してすべてのデータを状態に保存します return { ...state };
			}
		})
	]
});

デフォルトストアをエクスポートします。

vuex でのモジュールデータの永続的な保存

/* モジュール.js */
エクスポートconst dataStore = {
  州: {
    データ: []
  }
}
 
/* ストア.js */
'./module' から { dataStore } をインポートします。
 
const dataState = createPersistedState({
  パス: ['データ']
});
 
新しい Vuex.Store をエクスポートします({
  モジュール:
    データストア
  },
  プラグイン: [dataState]
});

注記:

  1. storage は保存方法で、オプションの値は localStorage、sessionStorage、cookies です。
  2. 上記のコードでは、localStorage および sessionStorage ストレージ メソッドを記述できます。Cookie を使用してデータを保存する場合は、別の方法で記述する必要があります。
  3. Render は関数を受け取り、オブジェクトを返します。返されたオブジェクト内のキーと値のペアは、永続的に保存されるデータです。
  4. 一部のデータを永続化したい場合は、キーと値のペアを使用して、返されるオブジェクトにデータを保存してください。レンダリング関数のパラメーターは状態オブジェクトです。

解決策2: vuex-persist

プラグインをインストールする

糸を追加する vuex-persist
// または npm install --save vuex-persist

使い方

「vuex」からVuexをインポートします。
// プラグインをインポートします。 import VuexPersistence from "vuex-persist";

Vue.js で Vuex をビルドします。
// 初期化 const state = {
	ユーザー名:'admin'
};
const 変異 = {};
定数アクション = {};
// インスタンスを作成する const vuexPersisted = new VuexPersistence({
	ストレージ: window.sessionStorage、
  レンダリング:状態=>({
  	ユーザー名:状態.ユーザー名
    // または...状態
  })
});

定数ストア = 新しい Vuex.Store({
	州、
  行動、
  突然変異、
  //データ永続設定プラグイン: [vuexPersisted.plugins]
});

デフォルトストアをエクスポートします。

プロパティメソッド

プロパティ値データ型説明する
ストレージに状態を保存するためのキー_ デフォルト: 'vuex' _
ストレージストレージ (Web API) localStorage、sessionStorage、localforage、またはカスタム Storage オブジェクト。getItem、setItem、clear などを実装する必要があります。デフォルト: window.localStorage
セーブステート関数(キー、状態[、ストレージ])ストレージを使用しない場合、このカスタム関数は状態を永続的に保存します
減速機関数(状態) => オブジェクト状態リデューサー。保存したい値のみに状態を減らします。デフォルトでは、状態全体を保存します。
フィルター関数(ミューテーション) => ブール値ミューテーション フィルターmutation.typeを調べて、永続書き込みをトリガーしたいものに対してのみ true を返します。デフォルトでは、すべてのミューテーションに対して true を返します。
モジュール弦[]永続化したいモジュールのリスト。(これを使用する場合は、独自のリデューサーを作成しないでください)
非同期ストレージブール値ストアが Promises (localforage など) を使用するかどうかを示します (localforage などを使用する場合は、これを true に設定する必要があります)デフォルト: false
サポートCircularブール値状態に循環参照があるかどうかを示します (state.x === state)デフォルト: false

要約する

上記の 2 つのソリューションにより、vuex データの永続的なストレージを実現できます。ソリューション 1 は実際の開発プロセスで使用したもので、ソリューション 2 は Github で見たものです。一般的に、どちらも当時の最終的なニーズを満たすことができ、参照用に該当するケースのデモがあります。比較すると、GitHub でのソリューション 1 の開始数はソリューション 2 の開始数よりも多くなっています。

実際の状況に応じて、あなたに合ったソリューションを選択してください。

これで、vuex データの永続性に関する 2 つの実装ソリューションに関するこの記事は終了です。vuex データの永続性に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vuex 永続化プラグイン (vuex-persistedstate) は、更新データの消失の問題を解決します。
  • ページを更新すると状態データが消える問題を解決するには、vuex を使用します。
  • vuexデータページを更新した後の初期化操作を解決する
  • vuex リフレッシュ後のデータ損失、データの永続性、vuex-persistedstate の問題

<<:  Ubuntu 19にTheanoをインストールする際の問題を解決する

>>:  Python ベースの MySQL レプリケーション ツールの詳細な説明

推薦する

Alibaba CloudがCloud Shieldから無料のSSL証明書(https)を申請

プロジェクトでは https サービスを使用する必要があるため、Alibaba Cloud では無料...

React 並行関数エクスペリエンス (フロントエンド並行モード)

React は、開発者が Web およびモバイルベースのアプリケーションを作成するために使用するオ...

Mysql SQL ステートメントのコメント

MySQL SQL ステートメントにコメントを追加できます。MySQL SQL ステートメントのコメ...

MySQL が起動直後にシャットダウンする問題 (ibdata1 ファイルの破損が原因) に対する完璧な解決策

コンピュータ ルームのサーバー上の mysql がしばらく実行されていたのですが、突然、再起動しても...

nginx proxy_cache バッチキャッシュクリアスクリプトの紹介

前書き: 以前、公式の nginx proxy_cache を CDN 静的キャッシュとして使用して...

HTMLのリストタグを数える

1. <dl>はリストを定義し、<dt>はリスト内の項目を定義し、<d...

Linux で MySQL のスケジュールバックアップを実装する方法

実際のプロジェクトでは、緊急事態を防ぐためにデータベースを頻繁にバックアップする必要があります。しば...

CSSはフロートをシミュレートして、画像の左右を囲む中央テキストの効果を実現します。

画像の周囲にテキストを折り返すとは何ですか?これは次の図の効果です。 エフェクトのCSSコードはここ...

ドロップダウンメニューを表示または非表示にするJavaScript

この記事では、ドロップダウンメニューを表示および非表示にするJavaScriptの具体的なコードを参...

スクロールバーを非表示にしてコンテンツをスクロールする CSS サンプルコード

序文ページの HTML 構造にネストされたボックスが多数含まれている場合、ページに複数の垂直スクロー...

MySql ページングで limit+order by を使用する場合のデータ重複の解決策

目次まとめ問題の説明問題を分析する問題を解決するまとめ複雑な知識をシンプルに説明できることは重要です...

Centos7.5 構成 Java 環境のインストール Tomcat の説明

Tomcat は Java 言語をベースにした Web サーバー ソフトウェアです。この記事では主に...

インターフェース設計の10の一般的なルール

<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...

docker システムコマンドセットの使用

目次docker システム df docker システム プルーンdocker systemc 情報...

JSON.stringify のさまざまな用途のまとめ

序文json を使用したことがある人なら、オブジェクトを文字列化してからバックエンドに送信するのが一...