解決VUEX刷新的時(shí)候出現(xiàn)數(shù)據(jù)消失
通常，我們?cè)谑褂胿ue編寫頁(yè)面時(shí)，會(huì)需要使用vuex在組件間傳遞（或者說共同響應(yīng)）同一個(gè)數(shù)據(jù)的變化。例如：用戶的登錄信息。
下面，我們使用傳遞用戶登錄信息的例子來(lái)一步步解決這個(gè)問題。
首先，我們的第一個(gè)問題是：我在一個(gè)組件（例如登錄組件頁(yè)面）中登錄了后，其它頁(yè)面要怎么獲取和響應(yīng)這個(gè)變化？（就是這么小白，/(ㄒoㄒ)/~~）
這個(gè)答案就是使用vuex啦，在中文版的文檔中有這樣一句話：
而這里的計(jì)算屬性就是我們的偉大的computed屬性啦~
（至于前面的通過mutation之類的把數(shù)據(jù)存入vuex中的過程就省略了，大家上網(wǎng)搜一下例子一大堆，切忌做伸手黨哦~）
至于用在我們的用戶登錄的例子中就像是下面這樣：
這樣我們就可以在頁(yè)面根據(jù)用戶信息響應(yīng)式地顯示內(nèi)容了。
那么，我們的第二個(gè)問題來(lái)了：我是獲取到了vuex中的用戶信息，但是我一刷新就沒有了?。≡趺崔k？？在線等！十萬(wàn)火急??！
這個(gè)答案就是使用localStorage啦。（了解過html 5的同學(xué)應(yīng)該都知道它，這里我就不科普了。）
一開始我雖然知道可以用localStorage，但是對(duì)于使用的邏輯有點(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ì)的請(qǐng)看https://github.com/tsironis/lockr）；
2、我們定義一個(gè)mutation方法，再次把數(shù)據(jù)從localStorage傳給state；
3、我們的問題發(fā)生在頁(yè)面刷新時(shí)，可能很多同學(xué)就會(huì)去想在監(jiān)聽頁(yè)面刷新事件時(shí)觸發(fā)上面第2步的那個(gè)方法。其實(shí)不用這么麻煩，在computed屬性時(shí)，只要我們判斷一下用戶信息是否為空，為空時(shí)調(diào)用第2步的那個(gè)方法就好了，然后我們把這個(gè)state return給那個(gè)響應(yīng)屬性就好了；
4、至于為什么這么麻煩在state和localStorage中傳來(lái)傳去，是因?yàn)閟tate的值刷新后會(huì)沒了，而localStorage的值不能響應(yīng)式地變化（Vue 僅可以對(duì)其管理的數(shù)據(jù)做響應(yīng)式處理，可以理解為 data 中的數(shù)據(jù)，localStorage 并不在 Vue 的管理下，自然不會(huì)有響應(yīng)特性）；
下面直接上computed處的代碼：
以上就是使用localStorage解決vuex的state的值在刷新之后沒有了這個(gè)問題的方法。
方法二：
在mount里面commit一次
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
從Vue到Postman全面驗(yàn)證API接口跨域問題解決
我們都知道跨域是同源策略導(dǎo)致的,域名不同、協(xié)議不同、端口號(hào)不同任意一種情況都會(huì)導(dǎo)致跨域,這篇文章主要介紹了從Vue到Postman全面驗(yàn)證API接口跨域問題,需要的朋友可以參考下2024-08-08
有時(shí)候我們希望在指定的位置輸出我們的子元素,這時(shí)候具名插槽就排上了用場(chǎng),這篇文章主要給大家介紹了關(guān)于Vue中插槽Slot基本使用與具名插槽的相關(guān)資料,需要的朋友可以參考下2022-10-10
uniapp實(shí)現(xiàn)APP、小程序與webview頁(yè)面間通訊的實(shí)現(xiàn)步驟
這篇文章主要介紹了uniapp實(shí)現(xiàn)APP、小程序與webview頁(yè)面間通訊的實(shí)現(xiàn)步驟,在Uniapp開發(fā)的APP或小程序頁(yè)面中嵌入一個(gè)H5網(wǎng)頁(yè),并實(shí)現(xiàn)H5頁(yè)面與APP之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2025-01-01
vue3.0 CLI - 2.6 - 組件的復(fù)用入門教程
這篇文章主要介紹了 vue3.0 CLI - 2.6 - 組件的復(fù)用，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09
前端vue+express實(shí)現(xiàn)文件的上傳下載示例
本文主要介紹了前端vue+express實(shí)現(xiàn)文件的上傳下載示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
Vue調(diào)用PC攝像頭實(shí)現(xiàn)拍照功能
這篇文章主要為大家詳細(xì)介紹了Vue調(diào)用PC攝像頭實(shí)現(xiàn)拍照功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue路由打開一個(gè)新的窗口的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue使用leafLet方式(繪圖工具),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
本文主要介紹了vue3整合springboot打完整jar包,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
手摸手教你實(shí)現(xiàn)Vue3 Reactivity
本文主要介紹了手摸手教你實(shí)現(xiàn)Vue3 Reactivity，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08