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

這篇文章主要介紹如何使用sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

1.原因

2.解決方法

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

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

3.具體實(shí)現(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 
 }

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

4.后話

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

補(bǔ)充：

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

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

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

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

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

以上是“如何使用sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！