用vue做專案開發很久了，對於vuex能用、會用，但是因為狀態脫離頁面和重新整理丟失兩個原因，一直都有種牴觸，特別是一些簡單的資料都是通過query或者本地儲存就解決了，然而對於一些複雜內容，不可避免的還是要使用vuex去處理(真香)，但是重新整理丟失的問題，的確叫人頭大。最近閒下來，我們來研究下怎麼乾掉這個問題～
不大了解vuex的同學，可以先去官網溜溜
由於vuex的資料是儲存在記憶體中的，相當於memory cache，當頁面重新整理的時候記憶體被清空過載新內容，原來的資料就丟了，為了解決這個我們可以借助瀏覽器的本地儲存來解決，此時我們有兩個選擇
相比之下localstorage太持久了，不主動清除都會一直在，而sessionstorage更符合vuex會話期狀態管理的設計初衷。因此下文中統一使用sessionstorage來做補充，解決問題。
有了補充物件之後，我們要做的只有兩點
1、每次在mutation中set state的時候，同步的塞到sessionstorage乙份
2、狀態初始化的時候，從sessionstorage中讀取相應內容並作為預設值(存在的話)
看起來很簡單，於是第一版方案有了，
export default new vuex.store(,
mutations:
},modules:
})
const storemaker = (state) =>
} else if (typeof state[key] === 'number')
} else }})
// 重寫set處理
return new proxy(state,
sessionstorage.setitem(key, temp)
return reflect.set(target, key, value)}})
}export default new vuex.store(),
mutations:
},modules:
})
1、對傳入的state初始值判斷型別，並嘗試從sessionstorage中讀取資料替換預設值
2、通過proxy重置state的set邏輯，新增同步儲存到sessionstorage的邏輯
其實本來可以通過proxy重置get邏輯處理取值的問題，但是由於vuex本身通過defineproperty函式重置了get邏輯，在這裡使用proxy覆蓋會有衝突，因此在初始化的時候直接讀取sessionstorage。
同時也存在一些問題：
1、目前只處理了一級屬性，二級以下屬性沒處理，對於初始化會有偏差。對於這點處理層級也不宜過深，因為過深的結構設計本來就並不合理，兩層基本也足夠了。基本處理就是對於state的每個key再去遍歷一遍，如果是object(非null非陣列非空物件)就重新proxy一下
2、可以嘗試打包成npm包，或者寫成vuex的外掛程式形式，方便使用
3、等等
～狀態不好，先寫到這，大家有興趣一起來討論，清清腦子再來補充～
聯想到的一些點：
1、memory cache和disk cache？記憶體怎麼清理？js垃圾**機制？
2、sessionstorage怎麼做到會話期快取？
3、session機制怎麼回事？
4、http的無狀態？狀態保持？客戶端保持？服務端保持？
5、等等等等
發散開看看，乙個地方真的能學到很多東西。。。
解決vuex頁面重新整理資料丟失
在vue中使用vuex做狀態管理，當重新整理頁面時，發現state裡面的資料丟失，這是因為當頁面重新整理時，store裡面的資料就會重新賦值初始化。解決 將state裡面的資料儲存在本地儲存中，這樣在重新整理頁面時就可以直接從本地儲存拿 1.選擇合適的儲存客戶端 localstorage是永久儲存在...
vuex頁面資料丟失 解決vuex重新整理頁面資料丟失
1 前言 vue構建的專案中，vuex的狀態儲存是響應式的，當vue元件從store中讀取狀態的時候，若store中的狀態發生變化，那麼相應的元件也會得到高效重新整理，問題來了，vuex儲存的資料只是在頁面中，相當於我們定義的全域性變數，重新整理之後，裡面的資料就會恢復到初始化的狀態。比如，使用者已...
解決Vuex頁面重新整理時資料丟失的問題
解決方法 將最新的vuex的狀態在頁面重新整理前儲存localstorage或這sessionstorage中 然後頁面載入前將localstorage或這sessionstorage的狀態再讀入到vuex中。頁面不重新整理，就用vuex的狀態，也只需要維護vuex的狀態 created this....