我們常常有這樣的需求,在某組件渲染完成后,才能進行數據請求,請求與這個值有關。
首先想到的是,在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 是一個非常好的解決方案!!!
