1、前言
vue構建的專案中，vuex的狀態儲存是響應式的，當vue元件從store中讀取狀態的時候，若store中的狀態發生變化，那麼相應的元件也會得到高效重新整理，問題來了，vuex儲存的資料只是在頁面中，相當於我們定義的全域性變數，重新整理之後，裡面的資料就會恢復到初始化的狀態。比如，使用者已經登入了，我把登入狀態放到state中了，一重新整理頁面，還要重新登入？購物車裡的新增的資料，一重新整理要重新新增？
2、使用場景
vuex訪問值一般都是放在computed計算屬性中，但是一重新整理頁面的資料就沒了
3、思路
監聽頁面是否重新整理，如果頁面重新整理了，將state物件存入到sessionstorage/localstorage中。頁面開啟之後，判斷sessionstorage/localstorage中是否存在state物件，如果存在，則說明頁面是被重新整理過的，將sessionstorage/localstorage中存的資料取出來給vuex中的state賦值。如果不存在，說明是第一次開啟，則取vuex中定義的state初始值。
4、**實現
//全域性監聽，頁面重新整理的時候將store裡state的值存到sessionstorage中，然後從sessionstorage中獲取，再賦值給store。然後再把session裡面存的刪除即可，相當於中介軟體的作用。
//在頁面載入時讀取sessionstorage裡的狀態資訊
if (sessionstorage.getitem("store")) {
this.$store.replacestate(
object.assign(
this.$store.state,
json.parse(sessionstorage.getitem("store"))
sessionstorage.removeitem("store")
//在頁面重新整理時將vuex裡的資訊儲存到sessionstorage裡
window.addeventlistener("beforeunload", () => {
sessionstorage.setitem("store", json.stringify(this.$store.state));
解決vuex頁面重新整理資料丟失
在vue中使用vuex做狀態管理，當重新整理頁面時，發現state裡面的資料丟失，這是因為當頁面重新整理時，store裡面的資料就會重新賦值初始化。解決 將state裡面的資料儲存在本地儲存中，這樣在重新整理頁面時就可以直接從本地儲存拿 1.選擇合適的儲存客戶端 localstorage是永久儲存在...
解決vue頁面重新整理，資料丟失
最先想到的應該就是利用localstorage sessionstorage將資料儲存在外部，做乙個持久化儲存，下面是利用localstorage儲存的具體方案 方案一 由於state中的資料是響應式的，而資料又是通過mutation來進行修改，故在通過mutation修改state中資料的同時呼叫...
解決 重新整理頁面Vuex資料丟失
vue將資料存入vuex裡面，在進行頁面重新整理的時候，資料丟失，這裡有兩個解決辦法應對不同場景 假如你的路由跳了3層以上，而且這幾個頁面都要用同乙個資料roomid，肯定想到路由傳參的方式傳roomid，那麼問題來了 解決方法 初始化得到roomid後，存入sessionstorge vuex裡面...