【vue】使用localStorage解決vuex在頁面刷新後數據被清除的問題

一般，咱們在使用vue編寫頁面時，會須要使用vuex在組件間傳遞（或者說共同響應）同一個數據的變化。例如：用戶的登陸信息。

下面，咱們使用傳遞用戶登陸信息的例子來一步步解決這個問題。

首先，咱們的第一個問題是：我在一個組件（例如登陸組件頁面）中登陸了後，其它頁面要怎麼獲取和響應這個變化？（就是這麼小白，/(ㄒoㄒ)/~~）

這個答案就是使用vuex啦，在中文版的文檔中有這樣一句話：

而這裏的計算屬性就是咱們的偉大的computed屬性啦~

（至於前面的經過mutation之類的把數據存入vuex中的過程就省略了，你們上網搜一下例子一大堆，切忌作伸手黨哦~）

至於用在咱們的用戶登陸的例子中就像是下面這樣：

這樣咱們就能夠在頁面根據用戶信息響應式地顯示內容了。

那麼，咱們的第二個問題來了：我是獲取到了vuex中的用戶信息，可是我一刷新就沒有了！！怎麼辦？？在線等！十萬火急！！

這個答案就是使用localStorage啦。（瞭解過html 5的同窗應該都知道它，這裏我就不科普了。）

一開始我雖然知道能夠用localStorage，可是對於使用的邏輯有點亂，因此在這裏記一下。

一、在vuex獲取到用戶信息時（例：state.user_id = user_info.user_id），同時把這個信息存入localStorage（Lockr.set('user_id', state.user_id) 這個Lockr是我用了一個叫Lockr的東西，其實它就是localStorage而已，關於它詳細的請看https://github.com/tsironis/lockr）；
二、咱們定義一個mutation方法，再次把數據從localStorage傳給state；
三、咱們的問題發生在頁面刷新時，可能不少同窗就會去想在監聽頁面刷新事件時觸發上面第2步的那個方法。其實不用這麼麻煩，在computed屬性時，只要咱們判斷一下用戶信息是否爲空，爲空時調用第2步的那個方法就行了，而後咱們把這個state return給那個響應屬性就行了；
四、至於爲何這麼麻煩在state和localStorage中傳來傳去，是由於state的值刷新後會沒了，而localStorage的值不能響應式地變化（Vue 僅能夠對其管理的數據作響應式處理，能夠理解爲 data 中的數據，localStorage 並不在 Vue 的管理下，天然不會有響應特性）；

下面直接上computed處的代碼：

以上就是使用localStorage解決vuex的state的值在刷新以後沒有了這個問題的方法。
我看到網上其它人好像有經過onStorage事件來響應localStorage變化的方法來作的，你們有興趣的也能夠去找找看哦~

以上純屬我的意見，但願你們發現有問題的能夠給我指點，也歡迎你們來互相交流。