zoukankan      html  css  js  c++  java
  • 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 是一个非常好的解决方案!!!

     

  • 相关阅读:
    cf1270D——交互,思维
    cf1270E —— 奇偶构造!+ 坐标系分类讨论旋转
    cf1207E——交互,思维
    cf1271D——经典 dp+贪心+图论
    cf1271E——数学找规律,二分套二分
    cf1272E——bfs反边图
    cf1272F——经典升维dp,好题!
    cf1276B——割点+深搜树
    cf1276C——单调性分析,思维
    cf1277D——思维贪心+字符串
  • 原文地址:https://www.cnblogs.com/CatcherLJ/p/11609333.html
Copyright © 2011-2022 走看看