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周辺ファイルシステムのカスタマイズ方法

推薦する

HTML コード作成ガイド

共通コンベンションタグ自己終了タグ。閉じる必要はありません (例: img input br hr ...

フロントエンドJavaScriptの動作原理

目次1. JavaScript エンジンとは何ですか? 2. V8エンジン3. ランタイム環境4. ...

MySQLでレコードを変更する場合、更新操作フィールド = フィールド + 文字列

シナリオによっては、varchar 型のフィールドを変更する必要があり、変更の結果は 2 つのフィー...

Vue3.0 ルーティング自動インポート方法の例

1. 前提条件インポートには require.context メソッドを使用します。vite で作成...

mysql 8.0.18 mgr のインストールと切り替え機能

1. システムインストールパッケージ yum -y インストール make gcc-c++ cmak...

vue で h5 側のアプリを開きます (Android か Apple かを判断します)

1. 開発環境 vue+vant 2. コンピュータシステム Windows 10 Profess...

MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離

目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...

Grafana+Prometheus を使用して MySQL サービスのパフォーマンスを監視する

Prometheus (プロメテウスとも呼ばれる) 公式サイト: https://prometheu...

Bツリーの削除プロセスの紹介

前回の記事 https://www.jb51.net/article/154157.htm では、B...

C# は MySQL コマンドラインのバックアップとリカバリを実装します

MySQL データベースをバックアップするためのツールは多数あります。過去 2 日間で、C# を使用...

mysql8.0.11クライアントがログインできない問題の解決方法

この記事では、mysql8.0.11クライアントがログインできない問題の解決策を紹介します。参考まで...

MySQL と Golan 間の従来の分散トランザクションのための 7 つのソリューション

目次1. 基本理論1.1 取引1.2 分散トランザクション2. 分散トランザクションソリューション2...

JavaScript で判決文をエレガントに記述する例

目次序文1. モナドの判断1.1 例1.2 オブジェクトに入れる1.3 マップに載せる2. 複数の判...

CSSスタイルの記述順序と命名規則と注意事項

書き順の重要性ブラウザのリフローを減らし、ブラウザのDOMレンダリングパフォーマンスを向上させる①:...

Bootstrap 3.0 学習ノートのページレイアウト

今回はレイアウトを中心に学習しますが、これは基本的なHTMLタグのほとんどにも存在するため、比較的簡...