vue项目中使用window的onresize事件方式

<template>
    <chart ref="chart1" :options="orgOptions"></chart>
</template>
<script>
export default {
  data() {
    return {
      orgOptions: {}
    };
  },

  created() {
    this.orgOptions = {
      xAxis: {
        type: "category",
        data: ""
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: "",
          type: "line"
        }
      ]
    };
  },
  mounted() {
    /*窗口自适应，关键代码*/
    window.onresize = () => {
      this.$refs.chart1.resize();
    };
  },
    //注销window.onresize事件
  destroyed() {
    window.onresize = null;
  }
}

<script>
export default {
  name: 'app',
  mounted () {
    window.onresize = () => {
      this.clientWidthResize()
    }
  },
  methods: {
    clientWidthResize () {
      this.$store.commit('Tool/resizeWidth', Number(document.documentElement.clientWidth))
    }
  }
}
</script>

export default {
  namespaced: true,
  state: {
    clientWidth: 0
  },
  getters: {},
  mutations: {
    resizeWidth(state, clientWidth) {
      state.clientWidth = clientWidth;
    },
  },
  actions: {},
}

computed: {
  clientWidth () {
    return this.$store.state.Tool.clientWidth || Number(document.documentElement.clientWidth)
  }
},
watch: {
  clientWidth (val) {
    console.log(val)
  }
},