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サイトにログインしたかどうかを判別し、次回ユーザーが自動的にログイン（またはパスワードを記憶）できるようにします。クッキーを削除した場合、ログインするたびに再度ログイン情報を入力する必要があります。
（２）最終ログイン時間等の情報を保存します。
（３）最後に閲覧したページを保存する（訪問した経路情報を保存する）
（4）ブラウザ行動追跡（ユーザー行動の追跡・分析など）
（５）パーソナライズされた設定（ユーザー定義の設定、テーマなど）

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

以下もご興味があるかもしれません: