解決vuex在頁面刷新后數據丟失的問題

一、原因

　　js代碼是運行在內存中的，代碼運行時的所有變量、函數也都是保存在內存中的。

　　刷新頁面，以前申請的內存被釋放，重新加載腳本代碼，變量重新賦值，所以這些數據要想存儲就必須存儲在外部，例如：Local Storage、Session Storage、Index DB等。這些都是瀏覽器提供的API，讓你可以將數據存儲在硬盤上，做持久化存儲。具體選擇哪一個就根據你實際需求來選擇。

二、解決方案

　　在客戶端存儲數據：

　　HTML5提供了2種在客戶端存儲數據的新方法：localStorage沒有時間期限，除非將它移除，sessionStorage即會話，當瀏覽器關閉時會話結束，有時間期限，具有自行百度。

　　之前，這些都是由cookie完成的，但是cookie不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得cookie速度很慢，而且效率不高。

　　web存儲分為localStorage個sessionStorage。

　　區別在於存儲的有效期和作用域不同。

　　通過localStorage存儲的數據是永久性的，除非web應用刻意刪除存儲的數據，或者用戶通過設置瀏覽器配置（瀏覽器提供的特定的UI）來刪除，否則數據將一直保存在用戶的電腦上，永不過期。

　　localStorage的作用域是限定在文檔源級別的。同源的文檔間共享同樣的localStorage數據（不論該源的腳本是否真正的訪問localStorage）。他們可以互相讀取對方的數據，甚至可以覆蓋對方的數據。但是，非同源的文檔間互相都不能讀取或者覆蓋對方的數據。（即使他們運行的腳本是來自同一台第三方的服務器也不行）。

　　sessionStorage存儲數據的有效期和存儲數據的腳本所在的最頂層的窗口或者是瀏覽器標簽頁是一樣的，一旦窗口或者標簽頁被永久關閉了，那么所有通過sessionStorage存儲的數據也都被刪除了。

　　我這里使用sessionStorage，這里需要注意的是vuex中的變量是響應式的，而sessionStorage不是，當你改變vuex中的狀態，組件會檢測到改變，而sessionStorage就不會了，頁面要重新刷新才可以看到改變，所以應 讓vuex中的狀態從sessionStorage中得到，這樣組件就可以響應式的變化

三、具體實現

　　應用背景是用戶登入后保存狀態，退出后移除狀態

//mutations
ADD_LOGIN_USER (state,data) {  //登入，保存狀態  
    sessionStorage.setItem("username", data);  //添加到sessionStorage  
    sessionStorage.setItem("isLogin",true);  
    state.username=data,             //同步的改變store中的狀態  
    state.isLogin=true  
},  
SIGN_OUT (state) {   //退出，刪除狀態  
    sessionStorage.removeItem("username");  //移除sessionStorage  
    sessionStorage.removeItem("isLogin");  
    state.username=''                //同步的改變story中的狀態  
    state.isLogin=false  
}

//getters
isLogin (state) {  
    if (!state.isLogin) {      
        state.isLogin=sessionStorage.getItem('isLogin');   //從sessionStorage中讀取狀態  
        state.username=sessionStorage.getItem('username');  
    }  
    return state.isLogin
}

總體的實現思路是讓vuex中store的狀態從sessionStorage取值，並和sessionStorage保持一致

getters:{
    userInfo(state){
        if(!state.userInfo){
            state.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        }
        return state.userInfo
    }
},
mutations:{
    LOGIN:(state,data) => {
        state.userInfo = data;
        sessionStorage.setItem('userInfo',JSON.stringify(data));
    },
    LOGOUT:(state) => {
        state.userInfo = null;
        sessionStorage.removeItem('userInfo');
    }
},

需要注意的是state里的userInfo初始化一定要是null，而不是{}，否則那個判斷就一直為true啦（個人遇到的一個小問題）