Vuex異步請求 導致子組件報錯

目錄：

前言：不知道大家有沒有遇到這樣的情況，A組件需要v-model綁定一個依賴於Vuex的數據，通常會直接綁定至Vuex數據源，如下所示是正常的處理流程；

data：
--------
 trimesterId: "", //學期ID
--------
  computed: {
    Term() {
      return this.$store.state.Term; //返回Vuex依賴值
    }
  },
--------
  mounted() {
    this.Search.trimesterId = this.Term[0].value; //賦初始值
  },

 

問題：

但是如果我們的Vuex數據源是異步請求的，那麼就會遇到Vuex數據還沒有拿到，我們的組件已經被渲染了，如下兩種情況：

①：刷新當前頁面，並沒有顯示初始綁定值；

②：從其他頁面進入當前頁面時，顯示正確！

思考：

第一種情況：刷新頁面的時候我們的Vuex也會隨之重新獲取數據，這裏麪包括所有actions的異步請求數據，當刷新頁面的時候組件獲取到的state的值爲空，也就是說組件在異步完成之前就已經完成渲染了，導致組件的數據沒有來得及渲染。

第二種情況：首先應該想到的是Vuex的狀態是什麼時候獲取到的？答案肯定是created生命週期獲取的，當從另一頁面進入當前頁面時，Vuex數據已經加載完畢、當前組件的依賴值已經存在，所以顯示正常；

思路：

我們最終的效果肯定是需要無論是刷新還是跳轉，都必須賦初始值並正常顯示下拉內容，那麼Vue的watch監聽就可以拿來做這件事情，關於watch我們通常監聽data裏存在的數據，但依舊可以監聽被computed監聽的數據，當computed的返回值拿到之後，watch也會監聽到computed變化，當computed變化我們把發生變化的值傳遞給watch，通過watch改變data的初始值，這樣當你刷新頁面時，Vuex重新觸發，隨之computed也會監聽得到，通過watch賦初始值；

---- data ----
 trimesterId: "", //學期ID

--------
  computed: {
    Term() {
      return this.$store.state.Term; //返回Vuex依賴值
    }
  },

--------
  mounted() {
    this.Search.trimesterId = this.Term[0].value; //賦初始值
  },

---- watch ---- 
Term(val) {
      this.Search.trimesterId = val[0].value; //賦初始值
    }

解決關鍵點：

computed：返回Vuex中依賴數據源；

mounted：在Vuex獲取到值以後 賦值給v-model綁定的數據原；

watch：監聽computed是否拿到返回值，拿到之後遞給v-model綁定；

PS:

其實出現這個問題其根本就是異步問題，渲染提前、數據隨後（糧草未動、兵馬先行），但開發中如果不使用Vuex，這樣的問題我們完全可以使用promise很好的解決，但如果使用settimeout去延遲渲染，本地開發不考慮網速、響應等原因，上線後網速多差誰也不知道，所以settimeout不管你寫多長時間的延遲也都是會存在很大問題的，不推薦！

最終效果：