vuexページのリフレッシュデータの損失の問題を解決する

vueプロジェクトではvuexでグローバルなステータス管理を行い、Webページをリフレッシュするとvuexインスタンスstoreに保存されているデータが失われることがわかります.
理由:
storeのデータは実行メモリに保存されているため、ページがリフレッシュされるとvueインスタンスがページに再ロードされ、storeのデータが再付与されて初期化されます.stateのデータをlocalstorage、sessionstorage、cookieに保存することで、ページリフレッシュデータが失われず、読み取りが容易になります.

localStorage:localStorageのライフサイクルは永続的であり、ページやブラウザを閉じてもlocalStorageのデータは消えません.localStorageは、データをアクティブに削除しない限り、データは消えません.

sessionStorage:sessionStorageのライフサイクルは、現在のセッションのみで有効です.sessionStorageは、同じソースのウィンドウに常に存在するデータである「ブラウザウィンドウ」の概念を導入しています.このブラウザウィンドウが閉じていない限り、ページをリフレッシュしたり、同じソースの別のページに入ったりしても、データは存在します.ただしsessionStorageはブラウザウィンドウを閉じると破棄されます.同時に独立して同じウィンドウを開いて同じページを開くと、sessionStorageも異なります.

cookie:ウィンドウまたはブラウザが閉じていても、設定されたcookieの有効期限が切れるまで有効です.格納データサイズは4 K程度で、個数制限(ブラウザごとに異なる)があり、一般的に20個を超えてはならない.欠点は、大きなデータを格納できず、読み取りにくいことです.

vueは単一ページアプリケーションであり、操作はすべて1つのページでルーティングをジャンプするため、sessionStorageが適切である.理由は以下の通りである.

sessionStorageは、ページを開くときにsessionStorageのデータが空であることを保証します.

ページを開くたびにlocalStorageは前回ページを開いたデータを格納しているので、前のデータをクリアする必要があります.

vuexではstateデータの修正はmutationメソッドで行わなければならないので、mutationでstateを修正すると同時にsessionstorageを修正する必要があります.問題は解決できますが面倒です.stateには多くのデータがあります.多くのmutationでstateを修正するにはsessionstorageを何度も修正する必要があります.それならsessionstorageで直接解決すればいいのではないでしょうか.なぜvuexで余計なことをするのですか?

vuexのデータはページのリフレッシュのたびに失われ、ページのリフレッシュ前にsessionstorageにデータを格納することができるかどうかは、可能であり、beforeunloadイベントはページのリフレッシュ前にトリガーすることができるが、各ページでbeforeunloadイベントをリスニングするのも適切ではないと感じ、そのイベントをリスニングする場所はappである.vueで.

app.vueのcreatedメソッドでsessionstorageのデータを読み出すstoreに格納し、vuexを用いる.storeのreplaceStateメソッド、storeのルート状態

を置き換える

beforeunloadメソッドでstore.stateはsessionstorageに格納されます.

コード#コード#

export default {
  name: 'App',
  created () {
    //        sessionStorage      
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    //       vuex       sessionStorage 
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}

原文住所:https://juejin.im/post/5c809599f265da2dbe030ec6