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

标签：mount   修改   步骤   this   效果   绑定   comm   操作   compute   

我们常常有这样的需求，在某组件渲染完成后，才能进行数据请求，请求与这个值有关。
首先想到的是，在mounted里面执行

经过试验发现：页面已经渲染，子组件还没渲染出来，所以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 是一个非常好的解决方案！！！

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

标签：mount   修改   步骤   this   效果   绑定   comm   操作   compute   

原文地址：https://www.cnblogs.com/CatcherLJ/p/11609333.html