首頁 >web前端 >js教程 >vuex頁面刷新後無法儲存資料怎麼處理

vuex頁面刷新後無法儲存資料怎麼處理

php中世界最好的语言
php中世界最好的语言原創
2018-06-08 13:49:374451瀏覽

這次帶給大家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中文網其它相關文章!

推薦閱讀:

JS如何讓二維陣列行列轉換

#redux-thunk實戰專案案例詳解

以上是vuex頁面刷新後無法儲存資料怎麼處理的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn