vuexの強制リフレッシュによるデータ損失問題の分析

vuexの強制リフレッシュによるデータ損失問題の分析

vuex 永続状態

  1. 基本原則: すべての vuex データをローカルストレージに保存し、ページが更新されたときにキャッシュからデータを取得して vuex に格納する
  2. ダウンロード: $ npm install vuex-persistedstate -S
  3. ストアにプラグインを導入する
'vuex-persistedstate' から persistedState をインポートします。
定数ストア = 新しい Vuex.Store({
  // ...
  プラグイン: [persistedState()]
})

vuex-persistedstateデフォルトでストレージにlocalStorageを使用します。sessionStorageを使用する場合は、次の設定を使用できます。

「vuex-persistedstate」からpersistedStateをインポートします。
定数ストア = 新しい Vuex.Store({
  // ...
  プラグイン: [persistedState ({
      ストレージ: window.sessionStorage
  })]
})
  • クッキーを使用する場合は、次の設定を使用できます。
  • ダウンロード: $ npm install js-cookie -S
'js-cookie' から Cookies をインポートします。
「vuex-persistedstate」からpersistedStateをインポートします。
定数ストア = 新しい Vuex.Store({
  // ...
  プラグイン: [persistedState ({
      ストレージ:
		getItem: キー => Cookies.get(キー),
		setItem: (キー、値) => Cookies.set(キー、値)、
		削除アイテム: キー => Cookies.remove(キー)
	}
  })]
})

セキュア-ls

  • 暗号化されたストレージ
  • ユーザー情報を vuex に保存すると、使用がはるかに便利になりますが、vuex がページを更新するときにデータが失われる問題を解決するために、 vuex-persistedstateプラグインが使用されます。vuex vuex-persistedstate暗号化されず、ユーザーの情報がキャッシュに公開されます。
  • これは非常に危険なので、ストレージを暗号化するにはsecure-lsを使用する必要があります。
  • ダウンロード: $ npm install secure-ls -S
「vue」からVueをインポートします。
「vuex」からVuexをインポートします。
'secure-ls' から SecureLS をインポートします。
「vuex-persistedstate」からpersistedStateをインポートします。

const ls = 新しいSecureLS({
	encodingType: "aes", // 暗号化方式 isCompression: false, // データ圧縮を有効にするかどうか encodingSecret: "old-beauty" // 
});

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

デフォルトの新しいVuex.Storeをエクスポートします({
	...
	プラグイン: [persistedState({
		// キー: "123123", // ストレージに保存するキー
		ストレージ:
			getItem: キー => ls.get(キー),
			setItem: (キー、値) => ls.set(キー、値)、
			削除アイテム: キー => ls.remove(キー)
		}
	})],
});

[注意] vuex-persist(不兼容ie) vuex-persistedstate

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

以下もご興味があるかもしれません:
  • Vuex ページの更新後にデータを失う方法
  • vuex が複雑なパラメータ (オブジェクト配列など) を格納するときにデータ損失を更新するソリューション
  • vuex ページの更新によるデータ損失の解決策
  • vuex リフレッシュ後のデータ損失の解決策
  • vuex ページを更新するときにデータ損失が発生する問題に対する 4 つの解決策

<<:  mysql は sql ファイルを実行し、エラーを報告します エラー: 不明なストレージ エンジン 'InnoDB' ソリューション

>>:  Linux周辺ファイルシステムのカスタマイズ方法

推薦する

カルーセルアニメーションを実現するVueコンポーネント

この記事では、カルーセルアニメーションを実現するためのVueコンポーネントの具体的なコードを例として...

MySQL インデックスの知識の要約

MySQL インデックスの確立は、MySQL の効率的な操作にとって非常に重要です。インデックスによ...

CSS シャドウ効果の比較: ドロップシャドウとボックスシャドウ

Drop-shadow と box-shadow はどちらも影効果(ハロー効果)のための CSS プ...

MySQL の組み込み関数 find_in_set を使用した効率的なあいまい検索の詳細な説明

一般的に使用される方法は次の 4 つです。 1.locate()メソッドを使用する一般的な使用法: ...

Vue は zip ファイルのダウンロードを実装します

この記事の例では、Vueの具体的なコードを共有し、zipファイルをダウンロードして参考にしています。...

MySql ビュー、トリガー、ストアド プロシージャに関する簡単な説明

ビュービューとは何ですか?ビューの役割は何ですか?ビューは仮想テーブルであり、データ自体を含まない論...

超詳細なMySQL使用仕様の共有

最近、データベース関連の操作が多くなり、会社の既存の仕様はあまり包括的ではありません。インターネット...

Nginx リバース プロキシ springboot jar パッケージ プロセス分析

Springboot プロジェクトをサーバーにデプロイする方法としては、war パッケージにパッケー...

SQL 最適化チュートリアル: IN クエリと RANGE クエリ

序文「High Performance MySQL」では、インデックスでは範囲フィールドの後の部分が...

emとは?emとpxの紹介と変換方法

それは何ですか? em はフォントの高さを指し、どのブラウザでもデフォルトのフォントの高さは 16 ...

重要なmysqlログファイルの概要

著者: 丁易出典: https://chengxuzhixin.com/blog/post/mysq...

Windows での MySQL 8.0.13 解凍バージョンのインストール グラフィック チュートリアル

この記事では、参考までにMySQL 8.0.13のインストールグラフィックチュートリアルを紹介します...

MySQLトランザクションとMySQLログの詳細な説明

取引特性1. アトミック性: トランザクションの開始後、すべての操作が完了するか、まったく実行されな...

JavaScript に関する 6 つの奇妙で便利な点

目次1. 解体のヒント2. デジタルセパレーター3. try...catch...finally が...

Linux 上で Docker コンテナを作成、一覧表示、削除する方法の概要

1. Dockerコンテナを起動する以下のコマンドを使用して新しい Docker コンテナを起動しま...