這次帶給大家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中文網其它相關文章！
推薦閱讀：
以上是vuex頁面刷新後無法儲存資料怎麼處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
