vue2.x中請求以前數據顯示以及vuex緩存的問題

　　在項目中遇到兩個問題，簡單的作個筆記來記錄本身解決的問題，可能不是很好的處理辦法，歡迎提出，本身還在不斷優化中...

　　第一個是vue在加載頁面的時候，會先加載靜態資源，這個時候數據尚未請求回來，用戶會先看到靜態的內容（就是頁面固定寫死的），過一會纔會有數據回來渲染，這體驗是不好的，其實解決辦法也很簡單，就是用vue裏的 v-if 來判斷請求的數據是否返回...

　

  <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' 就是來判斷數據有沒有請求回來，若是請求回來就讓他顯示，沒有請求到數據，就讓他loading，這樣體驗就會好不少。在這裏還須要注意的是，v-if判斷的數據源，是數據返回的字段，若是兩個字段只能存在其一的話，能夠v-if ='a || b' 來判斷數據是否成功的返回；還要注意的一點是，不能直接在組件裏用v-if判斷，也不能直接在根標籤裏判斷，直接嵌套一個div就能夠解決，並不影響樣式，只作數據是否正常返回的顯示做用；

　　第二個就是在使用vuex時，有數據緩存；我遇到的狀況是，在列表頁點擊進入詳情頁，返回到列表頁，在進入另外一個詳情頁的時候，數據會顯示以前的數據，同時頁面還在loading（接口返回的數據比較慢），過一會數據返回的時候，才從新渲染頁面。多是本身對vuex理解的不夠深刻，沒有在vuex基礎上解決這個問題。雖然曲折的解決了這個問題，可是不夠zhuang,可是解決了問題，後期再作優化。

　　在以前解決的方案中，是進入頁面的時候，從新刷新頁面，從新請求數據，代碼以下：

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);
}

　　可是沒有達到預期的效果，依然會出現上面的狀況... 丫的,抓狂了...（被別人催的感受真的不爽...）

　　百度啊，google啊，都沒有遇到這種狀況的？找到一個，仍是提問的，沒有回答的，好吧，仍是靠本身。本身動手，豐衣足食啊...

　　思路是，定義一個參數status爲false，當數據沒有請求回來，就不顯示，也是用上面的方式來判斷，一直loading（請求失敗，去掉loading），當數據返回的時候，讓status爲true；使用$nextTick來更新數據...

　　貼上本身部分的代碼做爲參考:

　　

<template>
    <div v-if='status && order.name'>
        //頁面展現的數據
    </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獲取的數據})
        },
        methods:{
           ...mapActions(['setDd']) //獲取數據的方法
       }
    }      
</script>                      

　　處理的方式比較醜陋...,可是實現了想要的效果；這裏注意一點就是v-if的判斷問題。（v-if='status && order.name'）這個用了而且，目的是有數據返回，才能讓他顯示，若是沒有數據，會顯示靜態的值，數據都爲underfind...