一、問題描述
1绽榛、一般在登錄成功的時候需要把用戶信息，菜單信息放置 vuex 中婿屹，作為全局的共享數(shù)據(jù)灭美。但是在頁面刷新的時候 vuex 里的數(shù)據(jù)會重新初始化，導致數(shù)據(jù)丟失昂利。因為 vuex 里的數(shù)據(jù)是保存在運行內(nèi)存中的届腐，當頁面刷新時，頁面會重新加載 vue 實例蜂奸，vuex 里面的數(shù)據(jù)就會被清空犁苏。
2、我在一個組件（例如登錄組件頁面）中登錄了后扩所，其它頁面要怎么獲取和響應這個變化围详，使用通過計算屬性實現(xiàn)響應數(shù)據(jù)的變化，mapGetters 獲取 vuex
computed: {
...mapGetters(['blogUser'])
},
但是刷新頁面后數(shù)據(jù)丟失了Ｗ嫫痢助赞！
二、解決思路：
- 辦法一：將 vuex 中的數(shù)據(jù)直接保存到瀏覽器緩存中（sessionStorage袁勺、localStorage雹食、cookie）
- 辦法二：在頁面刷新的時候再次請求遠程數(shù)據(jù)，使之動態(tài)更新 vuex 數(shù)據(jù)
- 辦法三：在父頁面向后臺請求遠程數(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));
});
}
