使用sessionStorage解決vuex在頁面刷新后數據被清除的問題

1.原因

2.解決方法

localStorage沒有時間期限，除非將它移除，sessionStorage即會話，當瀏覽器關閉時會話結束，有時間期限，具有自行百度

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

3.具體實現

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

mutations.js

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.js

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

總體的實現思路是讓vuex中story的狀態和sessionStorage保持一致（從sessionStorage取值）

4.后話

之前踩了一個大坑，沒注意到vuex可以讓組件響應式變化，讓組件直接取了sessionStorage的值，弄的我還必須刷新才能看到退出后的效果。

補充：

下面看戲vuex存儲和本地存儲(localstorage、sessionstorage)的區別

1.最重要的區別：vuex存儲在內存，localstorage則以文件的方式存儲在本地

2.應用場景：vuex用于組件之間的傳值，localstorage則主要用于不同頁面之間的傳值。

3.永久性：當刷新頁面時vuex存儲的值會丟失，localstorage不會。

注：很多同學覺得用localstorage可以代替vuex, 對于不變的數據確實可以，但是當兩個組件共用一個數據源（對象或數組）時，如果其中一個組件改變了該數據源，希望另一個組件響應該變化時，localstorage無法做到，原因就是區別1。

總結

以上所述是小編給大家介紹的vuex在頁面刷新后數據被清除問題的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com