這篇文章主要介紹如何解決vue2.x中數(shù)據(jù)渲染以及vuex緩存的問題,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、漠河網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、漠河網(wǎng)絡(luò)營(yíng)銷、漠河企業(yè)策劃、漠河品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等,從售前售中售后,我們都將竭誠(chéng)為您服務(wù),您的肯定,是我們大的嘉獎(jiǎng);創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供漠河建站搭建服務(wù),24小時(shí)服務(wù)熱線:18980820575,官方網(wǎng)址:www.cdcxhl.com在項(xiàng)目中遇到兩個(gè)問題,簡(jiǎn)單的做個(gè)筆記來(lái)記錄自己解決的問題,可能不是很好的處理辦法,歡迎提出,自己還在不斷優(yōu)化中...
第一個(gè)是vue在加載頁(yè)面的時(shí)候,會(huì)先加載靜態(tài)資源,這個(gè)時(shí)候數(shù)據(jù)還沒有請(qǐng)求回來(lái),用戶會(huì)先看到靜態(tài)的內(nèi)容(就是頁(yè)面固定寫死的),過(guò)一會(huì)才會(huì)有數(shù)據(jù)回來(lái)渲染,這體驗(yàn)是很差的,其實(shí)解決辦法也很簡(jiǎn)單,就是用vue里的 v-if 來(lái)判斷請(qǐng)求的數(shù)據(jù)是否返回...
這里的 v-if = 'moneyInMsg.uuid' 就是來(lái)判斷數(shù)據(jù)有沒有請(qǐng)求回來(lái),如果請(qǐng)求回來(lái)就讓他顯示,沒有請(qǐng)求到數(shù)據(jù),就讓他loading,這樣體驗(yàn)就會(huì)好很多。在這里還需要注意的是,v-if判斷的數(shù)據(jù)源,是數(shù)據(jù)返回的字段,如果兩個(gè)字段只能存在其一的話,可以v-if ='a || b' 來(lái)判斷數(shù)據(jù)是否成功的返回;還要注意的一點(diǎn)是,不能直接在組件里用v-if判斷,也不能直接在根標(biāo)簽里判斷,直接嵌套一個(gè)div就可以解決,并不影響樣式,只做數(shù)據(jù)是否正常返回的顯示作用;
第二個(gè)就是在使用vuex時(shí),有數(shù)據(jù)緩存;我遇到的情況是,在列表頁(yè)點(diǎn)擊進(jìn)入詳情頁(yè),返回到列表頁(yè),在進(jìn)入另一個(gè)詳情頁(yè)的時(shí)候,數(shù)據(jù)會(huì)顯示之前的數(shù)據(jù),同時(shí)頁(yè)面還在loading(接口返回的數(shù)據(jù)比較慢),過(guò)一會(huì)數(shù)據(jù)返回的時(shí)候,才重新渲染頁(yè)面??赡苁亲约簩?duì)vuex理解的不夠深入,沒有在vuex基礎(chǔ)上解決這個(gè)問題。雖然曲折的解決了這個(gè)問題,但是不夠zhuang,但是解決了問題,后期再做優(yōu)化。
在之前解決的方案中,是進(jìn)入頁(yè)面的時(shí)候,重新刷新頁(yè)面,重新請(qǐng)求數(shù)據(jù),代碼如下:
export const refresh = (title) => { document.title = title; let iframe = document.createElement('iframe'); iframe.src = require('./mm.jpg'); iframe.setAttribute('style', 'display:none;'); let loadFn = function () { iframe.removeEventListener('load', loadFn); document.body.removeChild(iframe); console.info('Page Title IS ' + title); iframe = null; loadFn = null; } document.body.appendChild(iframe) iframe.addEventListener('load', loadFn); }
但是沒有達(dá)到預(yù)期的效果,依然會(huì)出現(xiàn)上面的情況... 丫的,抓狂了...(被別人催的感覺真的不爽...)
百度啊,google啊,都沒有遇到這種情況的?找到一個(gè),還是提問的,沒有回答的,好吧,還是靠自己。自己動(dòng)手,豐衣足食啊...
思路是,定義一個(gè)參數(shù)status為false,當(dāng)數(shù)據(jù)沒有請(qǐng)求回來(lái),就不顯示,也是用上面的方式來(lái)判斷,一直loading(請(qǐng)求失敗,去掉loading),當(dāng)數(shù)據(jù)返回的時(shí)候,讓status為true;使用$nextTick來(lái)更新數(shù)據(jù)...
貼上自己部分的代碼作為參考:
//頁(yè)面展示的數(shù)據(jù)
處理的方式比較丑陋...,但是實(shí)現(xiàn)了想要的效果;這里注意一點(diǎn)就是v-if的判斷問題。(v-if='status && order.name')這個(gè)用了并且,目的是有數(shù)據(jù)返回,才能讓他顯示,如果沒有數(shù)據(jù),會(huì)顯示靜態(tài)的值,數(shù)據(jù)都為underfind...
以上是“如何解決vue2.x中數(shù)據(jù)渲染以及vuex緩存的問題”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。