我们常常有这样的需求,在某组件渲染完成后,才能进行数据请求,请求与这个值有关。
首先想到的是,在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 是一个非常好的解决方案!!!