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に格納されます.
コードは次のとおりです.
理由:
storeのデータは実行メモリに保存されているため、ページがリフレッシュされるとvueインスタンスがページに再ロードされ、storeのデータが再付与されて初期化されます.
解決方法:
stateのデータをlocalstorage、sessionstorage、cookieに保存します(三者の区別).これにより、ページリフレッシュデータが失われず、読み取りが容易になります.
vueは単一ページアプリケーションであり、操作はすべて1つのページでルーティングをジャンプするため、sessionStorageが適切である.理由は以下の通りである.
vuexではstateデータの修正はmutationメソッドで行わなければならないので、mutationでstateを修正すると同時にsessionstorageを修正する必要があります.問題は解決できますが面倒です.stateには多くのデータがあります.多くのmutationでstateを修正するにはsessionstorageを何度も修正する必要があります.それならsessionstorageで直接解決すればいいのではないでしょうか.なぜvuexで余計なことをするのですか?vuexのデータは、ページのリフレッシュのたびに失われ、ページのリフレッシュ前にsessionstorageにデータを格納できるかどうかは、可能であり、beforeunloadイベントはページのリフレッシュ前にトリガーすることができるが、各ページでbeforeunloadイベントをリスニングするのも適切ではないと感じ、そのイベントをリスニングする場所はappである.vueで.
コードは次のとおりです.
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))
})
}
}