天下无坑

天下无坑


vue等待必要数据加载完成后在初始化的方法

应用场景: 直接刷新子路由,父页面的数据还没加载完(如vuex),导致报错 > 计算属性 + immediate侦听

export default {
  components: {
  },
  data() {
    return {
      navTitle: '同行收客图',
      page: 1
    };
  },
  methods: {
    // 初始化方法
    init() {
      this.page==1 && this.getList()
    },
    getList(){

    }
  },
  computed: {
    // ready计算属性,判断一或多个必要的数据,返回 true 或 false
    ready(){
      return this.$store.state.info ? true : false;
    }
  },
  watch: {
    侦听 ready 为真执行初始化方法
    'ready': {
        handler: function(val){
            console.log('watch is runed')
            val && this.init()
        },
        immediate: true //立刻执行 在mounted之前,如果涉及dom操作则此处应该设置为false,在mounted里初始化
    }
  },
  mounted() {
    //ready && this.init()
  },
};

进阶: watch只监视第一次改变


//命令式好处是,可以得到一个取消监听的函数,在需要时取消监听

export default {
  data: {
    isReady: false
  },
  mounted() {
    const unwatch = this.$watch('isReady', function(newValue, oldValue){
      console.log(newValue);
      unwatch()
    });
  },
}

页面列表

ITEM_HTML