使用sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題
1.原因
2.解決方法
localStorage沒有時間期限，除非將它移除，sessionStorage即會話，當瀏覽器關閉時會話結束，有時間期限，具有自行百度
我這里使用sessionStorage，這里需要注意的是vuex中的變量是響應式的，而sessionStorage不是，當你改變vuex中的狀態(tài)，組件會檢測到改變，而sessionStorage就不會了，頁面要重新刷新才可以看到改變，所以應讓vuex中的狀態(tài)從sessionStorage中得到，這樣組件就可以響應式的變化
3.具體實現(xiàn)
應用背景是用戶登入后保存狀態(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可以讓組件響應式變化，讓組件直接取了sessionStorage的值，弄的我還必須刷新才能看到退出后的效果。
補充：
下面看戲vuex存儲和本地存儲(localstorage、sessionstorage)的區(qū)別
1.最重要的區(qū)別：vuex存儲在內(nèi)存，localstorage則以文件的方式存儲在本地
2.應用場景：vuex用于組件之間的傳值，localstorage則主要用于不同頁面之間的傳值。
3.永久性：當刷新頁面時vuex存儲的值會丟失，localstorage不會。
注：很多同學覺得用localstorage可以代替vuex, 對于不變的數(shù)據(jù)確實可以，但是當兩個組件共用一個數(shù)據(jù)源（對象或數(shù)組）時，如果其中一個組件改變了該數(shù)據(jù)源，希望另一個組件響應該變化時，localstorage無法做到，原因就是區(qū)別1。
總結
以上所述是小編給大家介紹的vuex在頁面刷新后數(shù)據(jù)被清除問題的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
vue是一種輕巧便捷的框架，那么如何進行對于數(shù)據(jù)加載的刷新呢？以下就是我對于vue.js數(shù)據(jù)加載的一點想法2017-06-06
Vue3?中?watch?與?watchEffect?區(qū)別及用法小結
這篇文章主要介紹了Vue3?中?watch?與?watchEffect?有什么區(qū)別？watch中需要指明監(jiān)視的屬性，也需要指明監(jiān)視的回調(diào)，而watchEffect中不需要指明監(jiān)視的屬性，只需要指明監(jiān)視的回調(diào)，回調(diào)函數(shù)中用到哪個屬性，就監(jiān)視哪個屬性，本文給大家詳細介紹，需要的朋友參考下2022-06-06
elementUI中el-upload文件上傳的實現(xiàn)方法
ElementUI的組件支持多種事件鉤子,如http-request、before-upload和on-change,以實現(xiàn)自定義文件上傳處理,這篇文章主要介紹了elementUI中el-upload文件上傳的實現(xiàn)方法,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了代碼詳解Vuejs響應式原理的基礎知識，有興趣的朋友們參考學習下吧。2017-12-12
vue給input file綁定函數(shù)獲取當前上傳的對象完美實現(xiàn)方法
這篇文章主要介紹了vue給input file綁定函數(shù)獲取當前上傳的對象完美實現(xiàn)方法,需要的朋友可以參考下2017-12-12
本篇文章主要介紹了簡單理解Vue中的nextTick方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
vue用戶長時間不操作退出到登錄頁的兩種實現(xiàn)方式
出于安全考慮，用戶長時間不操作，就回到登錄頁面，讓用戶重新登錄，本文就記錄一下實現(xiàn)這種效果的兩種方式，具有一定的參考價值，感興趣的可以了解一下2021-09-09
這篇文章主要介紹了關于vite.config.ts文件的配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue跳轉時根據(jù)url錨點(#xxx)實現(xiàn)頁面內(nèi)容定位的方法
本前端仔在做頁面跳轉的時候,被要求跳轉到頁面時候,把對應部分的內(nèi)容自動滾動到頂部,我一開始想到的就是根據(jù)錨點<a href="#xxid">進行處理,但是發(fā)現(xiàn)不太好實現(xiàn),于是便自己研究了一個比較取巧的方法,需要的朋友可以參考下2024-04-04
本文通過實例代碼給大家介紹了Vue中util的工具函數(shù)，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07