快捷導(dǎo)航

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

更新時間：2018年04月13日 09:53:53 作者：l354002675

localStorage沒有時間期限，除非將它移除，sessionStorage即會話，當(dāng)瀏覽器關(guān)閉時會話結(jié)束，有時間期限，具有自行百度。本文使用的是sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題,需要的朋友可以參考下

1.原因

2.解決方法

localStorage沒有時間期限，除非將它移除，sessionStorage即會話，當(dāng)瀏覽器關(guān)閉時會話結(jié)束，有時間期限，具有自行百度

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

3.具體實現(xiàn)

應(yīng)用背景是用戶登入后保存狀態(tài)，退出后移除狀態(tài)

mutations.js

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

getters.js

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

總體的實現(xiàn)思路是讓vuex中story的狀態(tài)和sessionStorage保持一致（從sessionStorage取值）

4.后話

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

補充：

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

1.最重要的區(qū)別：vuex存儲在內(nèi)存，localstorage則以文件的方式存儲在本地

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

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

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

總結(jié)

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

您可能感興趣的文章: