M 先生：全棧技術一枚

又是一個陽光明媚的一天，但是零下近20度的帝都著實把我等社畜凍屁了。

M 先生心裡一直藏著一個疑惑：$store 這個東西到底是個啥東西？

M 先生的自己理解，其實就是一個儲存容器，可以存放一些物件資料，這個資料是全域性的，並且具有雙向繫結特性，說白了就是你在一個頁面裡面操作某個 key 值，在其它使用該物件的頁面也會自動響應變更。

起初，M 先生感覺很麻煩，因為按照 vuex 的使用規範，需要為每一個 key 值預設並且還要提供一個固定的 mutations 方法，模板如下圖：

作為一個有程式碼潔癖的 M 先生（其實就是懶），一開始覺得 state 中為啥要每個 key 都得提前定義一遍呢，太麻煩了？後來才知道這個是必須的，只有提前定義的 key 值，才可以在各個被引用的頁面進行資料響應。既然 key 值偷不了懶了，看看 mutations 能否可以“偷工減料”。於是就有了下面的寫法

頁面中這樣使用

親測好用哦，驚不驚喜，意不意外 ^_^！！！

免去了寫 setXxx，爽！

好景不長，突然有一天接到使用者反饋，說：重新整理頁面，資料都沒了。

原來呀，Vuex 的值存在記憶體中，一重新整理就會全部清空。既然放在記憶體中不行，可我就把他放在一個重新整理不會丟資料的儲存容器裡。

靜下心，大腦開始快速的運轉。有了，何不同時儲存在 localStorage（永久存在）、sessionStorage（會話級別，關閉之後資料清空） 和 cookies（每個請求中，伺服器來決定其值）

於是在強大的搜尋引擎幫助下，找到了人家已經實現好的元件 vuex-persistedstate。

網際網路就是好，想要什麼，只有你想不到，沒有你找不到。

根據我的業務場景，會話級別的比較匹配，於是改造成下面的樣子

好了，測試上線，美美噠。