VUE 监控 VUEX 中的状态

804 阅读1分钟
背景:在一个项目中,需要获取 侧边栏展开/收缩 的状态,(侧边栏展开/收缩的状态已经存到vuex中)来resize图表(v-charts)。

方法:

computed: {
    getAsideCollapse() {        //获取并返回侧边栏状态
      return this.$store.state.d2admin.menu.asideCollapse;
    }
  },
  watch: {
    getAsideCollapse: {        //监控侧边栏状态
      handler(val) {        //立即执行监控
        if (!this.timer) {
          this.timer = true;
          let that = this;
          setTimeout(function() {        //避免因为组件异步加载导致的resize方法不起作用,设置定时器
            that.chartResize();        //图表resize方法
            that.timer = false;
          }, 400);
        }
      },
      immediate: true        //立即执行监控
    }
},
methods: {    chartResize() {      this.$nextTick(_ => {        this.$refs["chartPie"].echarts.resize();        this.$refs["chartLineBar"].echarts.resize();      });    }
}