最近在學(xué)習(xí)Vue.js，把自己遇到的問題做個(gè)記錄，所以，今天添加一點(diǎn)小筆記。

在項(xiàng)目中遇到兩個(gè)問題，簡(jiǎn)單的做個(gè)筆記來記錄自己解決的問題，可能不是很好的處理辦法，歡迎提出，自己還在不斷優(yōu)化中...

第一個(gè)是vue在加載頁面的時(shí)候，會(huì)先加載靜態(tài)資源，這個(gè)時(shí)候數(shù)據(jù)還沒有請(qǐng)求回來，用戶會(huì)先看到靜態(tài)的內(nèi)容（就是頁面固定寫死的），過一會(huì)才會(huì)有數(shù)據(jù)回來渲染，這體驗(yàn)是很差的，其實(shí)解決辦法也很簡(jiǎn)單，就是用vue里的 v-if 來判斷請(qǐng)求的數(shù)據(jù)是否返回...　

 <div class="container" id="app" v-cloak>
   <div v-if='moneyInMsg.uuid'>
     <in-account-msg :money-in-msg="moneyInMsg"></in-account-msg>
   </div>
 </div>

這里的  v-if = 'moneyInMsg.uuid' 就是來判斷數(shù)據(jù)有沒有請(qǐng)求回來，如果請(qǐng)求回來就讓他顯示，沒有請(qǐng)求到數(shù)據(jù)，就讓他loading，這樣體驗(yàn)就會(huì)好很多。在這里還需要注意的是，v-if判斷的數(shù)據(jù)源，是數(shù)據(jù)返回的字段，如果兩個(gè)字段只能存在其一的話，可以v-if ='a || b' 來判斷數(shù)據(jù)是否成功的返回；還要注意的一點(diǎn)是，不能直接在組件里用v-if判斷，也不能直接在根標(biāo)簽里判斷，直接嵌套一個(gè)div就可以解決，并不影響樣式，只做數(shù)據(jù)是否正常返回的顯示作用；

第二個(gè)就是在使用vuex時(shí)，有數(shù)據(jù)緩存；我遇到的情況是，在列表頁點(diǎn)擊進(jìn)入詳情頁，返回到列表頁，在進(jìn)入另一個(gè)詳情頁的時(shí)候，數(shù)據(jù)會(huì)顯示之前的數(shù)據(jù)，同時(shí)頁面還在loading（接口返回的數(shù)據(jù)比較慢），過一會(huì)數(shù)據(jù)返回的時(shí)候，才重新渲染頁面?？赡苁亲约簩?duì)vuex理解的不夠深入，沒有在vuex基礎(chǔ)上解決這個(gè)問題。雖然曲折的解決了這個(gè)問題，但是不夠zhuang,但是解決了問題，后期再做優(yōu)化。

在之前解決的方案中，是進(jìn)入頁面的時(shí)候，重新刷新頁面，重新請(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)求回來，就不顯示，也是用上面的方式來判斷，一直loading（請(qǐng)求失敗，去掉loading），當(dāng)數(shù)據(jù)返回的時(shí)候，讓status為true；使用$nextTick來更新數(shù)據(jù)...

貼上自己部分的代碼作為參考:

<template>
  <div v-if='status && order.name'>
    //頁面展示的數(shù)據(jù)
  </div>
</template> 
<script>
  export default{
  data(){
    return {
       status：false
      }
    },
    created(){
　　     var _this = this;
      this.setDd({res =>{
        _this.$nextTick(function(){
          _this.status= true
        });  
      }})
    },
    computed:{
      ...mapGetters({//getter獲取的數(shù)據(jù)})
    },
    methods:{
      ...mapActions(['setDd']) //獲取數(shù)據(jù)的方法
    }
  }   
</script>       

處理的方式比較丑陋...,但是實(shí)現(xiàn)了想要的效果；這里注意一點(diǎn)就是v-if的判斷問題。（v-if='status && order.name'）這個(gè)用了并且，目的是有數(shù)據(jù)返回，才能讓他顯示，如果沒有數(shù)據(jù)，會(huì)顯示靜態(tài)的值，數(shù)據(jù)都為underfind...

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論