vuex + watch = 監聽組件渲染狀態


我們常常有這樣的需求,在某組件渲染完成后,才能進行數據請求,請求與這個值有關。
首先想到的是,在mounted里面執行

created:在模板渲染成html前調用,即通常初始化某些屬性值,然后再渲染成視圖。
mounted:在模板渲染成html后調用,通常是初始化頁面完成后,再對html的dom節點進行一些需要的操作。

經過試驗發現:頁面已經渲染,子組件還沒渲染出來,所以mounted不能滿足要求。

后來求助大神+度娘,終於找到了一個可靠的解決方案!!!
vuex + watch (vueX全局狀態管理,watch是對vue中變量的監聽)

步驟是這樣的,在vuex中定義一個變量來保存組件渲染的狀態,默認組件未渲染。

state: {
    isFinish:false,//組件渲染的狀態
  },
mutations: {
    SET_IS_FINISH(state, isFinish) {//組件狀態修改的全局方法
      state.isFinish = isFinish;
    },
  },
//由於組件綁定了值,當值存在的時候,組件就已渲染完成。所以,在組件的某個方法內,一定會設置這個值為true;
  beforeDestroy:function(){
    this.$store.commit('SET_IS_FINISH', false);
  }

  如果這個組件在多處使用,一定要在頁面注銷的時候,把狀態改回去,這樣watch監聽才有效果。

在使用組件的頁面上,監聽這個狀態,當值為true時,該組件渲染完成。此時在進行頁面請求,就准確無誤了!

computed:{
        myfinish(){
          return this.$store.state.isFinish;
        },
    },
watch:{
      myfinish(newVal,oldVal){
  //在這里,組件已渲染完成,既可以對dom進行操作,也可以進行組件渲染完成后的數據請求。
      },
    },

 

這樣就完美的實現了我們想要的效果,由於必須要等待組件渲染的結果,用它來請求數據。
VUEX + watch 是一個非常好的解決方案!!!

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM