Vuexはセッションストレージデータを結合して、ページを更新するときにデータが失われる問題を解決します

Vuexはセッションストレージデータを結合して、ページを更新するときにデータが失われる問題を解決します

序文

プロジェクト内のフォーム フィルター項目では、選択後、ページを更新するとデータが変更され、選択したオプションでは保持されません。
プロジェクトにデータを保存するには Vuex を使用しますが、Web ページを更新するとストアに保存されたデータが失われます。

ヒント:以下はこの記事の主な内容です。以下のケースを参考にしてください。

1. 理由:

Vuex はグローバルなデータ状態管理メカニズムです。ストア内のデータは実行中のメモリに保存されます。ページが更新されると、ページは Vue インスタンスを再読み込みし、ストア内のデータは初期化された状態に再割り当てされます。

2. 解決策のアイデア:

ローカルストレージで vuex を使用して、データを失うことなくページを更新する

1. ローカル保存方法:

1. localStorage: 永続的なストレージ。localStorage に保存されたデータは、ページやブラウザを閉じても消えません。データを積極的に削除しない限り、消えることはありません。
Chromeブラウザを例にとると、データはC:\Users\your computer name\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldbに保存されます。
2. sessionStorage: 現在のセッションでのみ有効です。現在のページまたはブラウザが閉じられると、データは破棄されます。 SessionStorage は、同じオリジンのウィンドウに常に存在するデータです。ページが更新されても存在し続け、現在のページが閉じられると破棄されます。
3. Cookie: ブラウザで有効期限を設定しない場合、Cookie はメモリに保存され、ブラウザを閉じると有効期限が終了します。このタイプの Cookie はセッション Cookie と呼ばれます。ブラウザで Cookie の有効期限が設定されている場合、Cookie はハードディスクに保存されます。ブラウザを閉じた後も、有効期限が切れるまで Cookie データは存在します。 。クッキーに保存されるデータのサイズは約 4kb で、通常は 20 を超えず、大きなデータを保存することはできません。

拡張機能:Cookieの適用シナリオ(1)ユーザーがWebサイトにログインしたかどうかを判別し、次回ユーザーが自動的にログイン(またはパスワードを記憶)できるようにします。クッキーを削除した場合、ログインするたびに再度ログイン情報を入力する必要があります。
(2)最終ログイン時間等の情報を保存します。
(3)最後に閲覧したページを保存する(訪問した経路情報を保存する)
(4)ブラウザ行動追跡(ユーザー行動の追跡・分析など)
(5)パーソナライズされた設定(ユーザー定義の設定、テーマなど)

2. 実装手順:

vueはシングルページアプリケーションなので、すべての操作は1ページで完了し、このプロジェクトは現在開いているプロジェクトでのみ使用されるため、sessionStorageを使用する方が適切です。

  • データは状態に保存されます。状態データは、mutation メソッドを通じて変更されます。mutation によって状態が変更されると、データは sessionStorage にも保存されます。
  • プロジェクトを開いたら、App.vue 内のデータを初期化します。ローカルに保存されているデータがある場合は、アクション内のメソッドを呼び出して状態に値を割り当てます。
  • フォーム項目が選択されると、その状態のデータも同時に変更されます。
//store/selectData.js
const state ={//状態データリストに格納されるデータ: {
    exchangeIdSum: null、
  }
}
const 変異 = {
  setExchangeIdSum(state, data) { // 選択したデータを再割り当てし、sessionStorage に保存します state.dataList.exchangeIdSum = data
    sessionStorage.setItem('dataList',JSON.stringify(state.dataList))
  }
  setDataList(状態、データ) {
    state.dataList = JSON.parse(JSON.stringify(データ))
  }
}
定数アクション = {
  resetDataList: ({コミット}, リスト) => {
    タイムアウトを設定する(() => {
      コミット('setDataList', リスト)
    }, 2000);
  }
}
エクスポートデフォルト{
  州、
  突然変異、
  行動、
}

//フォームフィルタリングページでの操作メソッド: {
  exchangeChange(val){//ドロップダウンボックスが選択されているときに状態のデータを変更します。this.$store.commit('selectData/setExchangeIdSum', val)
  },
}
//App.vue in create(){//ページに入るとすぐに、sessionStorage sessionStorage.getItem('dataList') にデータがあるかどうかを確認します。
  this.$store.dispatch('selectData/resetDataList', JSON.parse(sessionStorage.getItem('dataList'))):{}
}

3. 最適化:

なぜなら、以前は状態データを変更するときに、各ミューテーションで sessionStorage を変更する必要がありましたが、変更する状態データが大量にある場合は、そのたびに sessionStorage が変更されることになり、少し面倒です。

ここに画像の説明を挿入

解決する:
① セッションストレージに直接データを保存できます ② Vue がリフレッシュされるたびにページは失われます。ページをリフレッシュする前にセッションストレージにデータを保存できます。ページをリフレッシュする前に beforeunload イベントをトリガーできます。

これで、vuex とセッション ストレージ データを組み合わせて使用​​して、ページを更新するときにデータ損失が発生する問題を解決する方法についての説明は終了です。vuex セッション ストレージ データに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue プロジェクトで localStorage または sessionStorage の変更を監視する方法
  • Vue が axios を使用することで発生するさまざまなバックグラウンド セッション操作
  • vue+koa2 を使用してセッションとトークンのログインステータス検証を実装する例
  • Vue でパスワード機能を記憶するために sessionStorage を使用する
  • Vue でのローカルストレージとセッションストレージの使用に関する詳細な説明

<<:  Nginxを使用してストリーミングメディアサーバーを構築し、ライブブロードキャスト機能を実現する

>>:  MySQL ストレージエンジンの簡単な紹介

推薦する

Unicode における CJK (中国語、日本語、韓国語の統合表意文字) 文字の概要

CJK は CJK Unified Ideographs の略称で、「中国語、日本語、韓国語の統一表...

Avue でカスタム検索バーを実装し、検索イベントをクリアする実践

目次1. 検索バーの内容をカスタマイズする2. 検索ボタンをカスタマイズする検索バーをカスタマイズし...

MySQLはパスワードなしでログインする例を実装しています

具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...

Confluence と jira-software を Docker にデプロイする方法

バージョン: セントロス==7.2 jdk==1.8 合流==6.15.4 jira-ソフトウェア=...

Windows で mysql-8.0.18-winx64 をインストールするチュートリアル (画像とテキスト付き)

1. インストールパッケージをダウンロードするインストール パッケージは次の場所にあります:参考:...

JavaScript 組み込みオブジェクトの概要

目次1. 組み込みオブジェクト2. 数学オブジェクト1. Mathオブジェクトの使用2. 指定された...

MySQL の一時テーブルと派生テーブルについての簡単な説明

派生テーブルについてメイン クエリに派生テーブルが含まれている場合、または SELECT ステートメ...

Centos8 システムの VMware インストール チュートリアル図 (コマンド ライン モード)

目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...

Ubuntu 18.04 に Nvidia グラフィック カード ドライバーをインストールするチュートリアル (画像とテキスト付き)

0. 事前準備BIOS でセキュア ブートを無効にします。無効にしないと、サードパーティ ソースを...

LinuxでのDockerのインストールチュートリアル

Docker パッケージは、デフォルトの CentOS-Extras リポジトリにすでに含まれていま...

ブラインドの特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたブラインドの特殊効果を紹介します。効果は次のとおりです。...

Bash スクリプトでの配列メソッドの作成と使用の概要

Bashで配列を定義するbash スクリプトで新しい配列を作成する方法は 2 つあります。 1 つ目...

MySQL アクティブ-アクティブ同期レプリケーションの 4 つのソリューションの詳細な説明

目次MySQLネイティブレプリケーションに基づくマスター-マスター同期ソリューションGaleraレプ...

Dockeにredisをインストールする方法

1. redisイメージを検索する docker 検索 redis 2. Redisイメージをダウン...

HTMLの空リンクの役割についての簡単な説明

空のリンク:つまり、ターゲット エンドポイントとのリンクはありません。フォーマット <a hr...