一、問題描述
1、一般在登錄成功的時候需要把用戶信息，菜單信息放置 vuex 中，作為全局的共享數(shù)據(jù)。但是在頁面刷新的時候 vuex 里的數(shù)據(jù)會重新初始化，導(dǎo)致數(shù)據(jù)丟失。因為 vuex 里的數(shù)據(jù)是保存在運(yùn)行內(nèi)存中的，當(dāng)頁面刷新時，頁面會重新加載 vue 實例，vuex 里面的數(shù)據(jù)就會被清空。
2、我在一個組件（例如登錄組件頁面）中登錄了后，其它頁面要怎么獲取和響應(yīng)這個變化，使用通過計算屬性實現(xiàn)響應(yīng)數(shù)據(jù)的變化，mapGetters 獲取 vuex
computed: {
...mapGetters(['blogUser'])
},
但是刷新頁面后數(shù)據(jù)丟失了！！
二、解決思路：
- 辦法一：將 vuex 中的數(shù)據(jù)直接保存到瀏覽器緩存中（sessionStorage、localStorage、cookie）
- 辦法二：在頁面刷新的時候再次請求遠(yuǎn)程數(shù)據(jù)，使之動態(tài)更新 vuex 數(shù)據(jù)
- 辦法三：在父頁面向后臺請求遠(yuǎn)程數(shù)據(jù)，并且在頁面刷新前將 vuex 的數(shù)據(jù)先保存至sessionStorage（以防請求數(shù)據(jù)量過大頁面加載時拿不到返回的數(shù)據(jù)）
因為我存取的數(shù)據(jù)比較少所以通過辦法一解決：
在App.vue 中添加以下代碼
//===下面是解決刷新頁面丟失vuex數(shù)據(jù)
created() {
//在頁面加載時讀取sessionStorage里的狀態(tài)信息
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));
});
}
