1.理由
第二步:解決方案
LocalStorage沒有時間限制，除非刪除它，sessionStorage是壹個會話，當瀏覽器關閉時，會話結束，有時間限制和自己的百度。
我在這裏使用會話存儲。需要註意的是，vuex中的變量是響應式的，而sessionStorage不是。當您更改vuex中的狀態時，組件將檢測到更改，但sessionStorage不會檢測到更改，並且頁面將刷新以查看更改，因此vuex中的狀態應該從sessionStorage中獲取，以便組件可以響應更改。
3.具體實現
應用背景是用戶登錄後保存狀態，註銷後刪除狀態。
mutations.js
ADD _ log in _ USER（state，data）{//登錄並保存狀態。
sessionStorage.setItem（“用戶名“，數據）；//添加到會話存儲
session storage . setitem（“isLogin“，true）；
State.username=data，//同步更改存儲中的狀態。
state.isLogin=true
},
SIGN _ OUT（state）{//退出並刪除狀態。
session storage . remove item（“username“）；//刪除會話存儲
session storage . remove item（“is login“）；
state . username =‘‘‘//同步更改故事中的狀態。
state.isLogin=false
}getters.js
isLogin（州）{
如果(！state . is log in ）{
state . isLogin = session storage . getitem（‘isLogin‘）；//從sessionStorage讀取狀態。
state . username = session storage . getitem（‘username‘）；
}
返回狀態。用戶名
}總體實現思路是保持vuex中story的狀態與sessionStorage壹致（從sessionStorage中取值）。
4.定論
之前踩了壹個大坑，沒註意到vuex可以讓組件響應式改變，讓組件直接取sessionStorage的值，所以退出後要刷新才能看到效果。
補充:
我們來看看vuex存儲和local storage（session storage）的區別。
1.最重要的區別:vuex存儲在內存中，而localstorage作為文件存儲在本地。
2.應用場景:vuex用於組件之間的值傳遞，而localstorage主要用於不同頁面之間的值傳遞。
3.永久性:當頁面刷新時，vuex存儲的值將會丟失，但localstorage不會丟失。
註意:很多同學認為使用localstorage可以代替vuex，對於不變的數據確實是可以的。但是，當兩個組件* * *使用壹個數據源（對象或數組）時，如果其中壹個組件更改了數據源並希望另壹個組件對更改做出響應，則localstorage無法做到這壹點，因為差異為1。
相信看完這個案例，妳已經掌握了方法。更多精彩請關註Gxl上的其他相關文章！
推薦閱讀:
JS如何將二維數組轉換為行和列
redux-thunk實戰項目案例詳解