vuex + watch = 监听组件渲染状态

Posted 2020-11-16 catcherlj

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