這篇文章主要介紹VUEX刷新的時(shí)候出現(xiàn)數(shù)據(jù)消失怎么辦，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站是一家專業(yè)提供浦口企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為浦口眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

首先，我們的第一個(gè)問題是：我在一個(gè)組件（例如登錄組件頁面）中登錄了后，其它頁面要怎么獲取和響應(yīng)這個(gè)變化？

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

而這里的計(jì)算屬性就是我們的偉大的computed屬性啦~

（至于前面的通過mutation之類的把數(shù)據(jù)存入vuex中的過程就省略了，大家上網(wǎng)搜一下例子一大堆，切忌做伸手黨哦~）

至于用在我們的用戶登錄的例子中就像是下面這樣：

這樣我們就可以在頁面根據(jù)用戶信息響應(yīng)式地顯示內(nèi)容了。

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

這個(gè)答案就是使用localStorage啦。（了解過html 5的同學(xué)應(yīng)該都知道它，這里我就不科普了。）

一開始我雖然知道可以用localStorage，但是對于使用的邏輯有點(diǎn)亂，所以在這里記一下。

1、在vuex獲取到用戶信息時(shí)（例：state.user_id = user_info.user_id），同時(shí)把這個(gè)信息存入localStorage（Lockr.set('user_id', state.user_id) 這個(gè)Lockr是我用了一個(gè)叫Lockr的東西，其實(shí)它就是localStorage而已，關(guān)于它詳細(xì)的請看https://github.com/tsironis/lockr）；

2、我們定義一個(gè)mutation方法，再次把數(shù)據(jù)從localStorage傳給state；

3、我們的問題發(fā)生在頁面刷新時(shí)，可能很多同學(xué)就會(huì)去想在監(jiān)聽頁面刷新事件時(shí)觸發(fā)上面第2步的那個(gè)方法。其實(shí)不用這么麻煩，在computed屬性時(shí)，只要我們判斷一下用戶信息是否為空，為空時(shí)調(diào)用第2步的那個(gè)方法就好了，然后我們把這個(gè)state return給那個(gè)響應(yīng)屬性就好了；

4、至于為什么這么麻煩在state和localStorage中傳來傳去，是因?yàn)閟tate的值刷新后會(huì)沒了，而localStorage的值不能響應(yīng)式地變化（Vue 僅可以對其管理的數(shù)據(jù)做響應(yīng)式處理，可以理解為 data 中的數(shù)據(jù)，localStorage 并不在 Vue 的管理下，自然不會(huì)有響應(yīng)特性）；

下面直接上computed處的代碼：

以上就是使用localStorage解決vuex的state的值在刷新之后沒有了這個(gè)問題的方法。

方法二：

在mount里面commit一次

以上是“VUEX刷新的時(shí)候出現(xiàn)數(shù)據(jù)消失怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！