怎麼阻止vuex頁面刷新後資料清除

這次帶給大家怎麼阻止vuex頁面刷新後資料清除，阻止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。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

angular實作頁面局部列印步驟詳解

vue常用元件使用詳解

以上是怎麼阻止vuex頁面刷新後資料清除的詳細內容。更多資訊請關注PHP中文網其他相關文章！