vuexのstateデータ損失の解決策
1110 ワード
PCエンドプロジェクトは、vuexでグローバルなステータス管理を行い、Webページをリフレッシュすると、vuexインスタンスstoreに保存されているデータが失われます.例えば、ユーザーはすでにログインして、私はログイン状態をstateの中に置いて、ページをリフレッシュして、また再ログインします
発生原因:storeのデータは実行メモリに保存されているため、ページがリフレッシュされるとvueインスタンスが再ロードされ、storeのデータが再割り当てされます.
ソリューション:
ページがリフレッシュされた場合は、sessionStorage/localStorageにstateオブジェクトが格納されます.ページが開くと、sessionStorage/localStorageにstateオブジェクトが存在するかどうかを判断し、存在する場合はページがリフレッシュされていることを示し、sessionStorage/localStorageに格納されているデータをvuexのstateに割り当てます.
参照ドキュメント:https://blog.csdn.net/guzhao593/article/details/81435342
https://blog.csdn.net/wang1006008051/article/details/82424335
発生原因:storeのデータは実行メモリに保存されているため、ページがリフレッシュされるとvueインスタンスが再ロードされ、storeのデータが再割り当てされます.
ソリューション:
ページがリフレッシュされた場合は、sessionStorage/localStorageにstateオブジェクトが格納されます.ページが開くと、sessionStorage/localStorageにstateオブジェクトが存在するかどうかを判断し、存在する場合はページがリフレッシュされていることを示し、sessionStorage/localStorageに格納されているデータをvuexのstateに割り当てます.
sessionStorage、選択された理由vueは単一ページアプリケーションであり、操作はいずれも1ページでルーティングをスキップする.localStorageライフサイクルは永続的であり、sessionStorageは現在のセッションでのみ有効であり、ページまたはブラウザを閉じた後に消去されます.ページを開くときにsessionStorageのデータが空であることを保証し、localStorageであれば前回開いたページのデータが読み出される.storeには機密情報が格納されている可能性があるので、sessionStorageに置いておくのはよくありません.ページのロードが完了したら、指定したsessionをクリアしたり削除したりします.beforeunloadこのイベントは、ページのリフレッシュ時に先にトリガーされます.だから私はapp.vueというエントリコンポーネントに置くことを選んだ.そうすれば、ページをリフレッシュするたびにトリガーされることを保証することができる.参照ドキュメント:https://blog.csdn.net/guzhao593/article/details/81435342
https://blog.csdn.net/wang1006008051/article/details/82424335