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

1、緣由

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

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

2、解決方案

　　在客戶端存儲數據：

　　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中獲得，這樣組件就能夠響應式的變化

3、具體實現

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

//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啦（我的遇到的一個小問題）