vuex實現寬高自適應

//app.vue裏設置，寬度通過柵格控制，高度通過vuex獲取高度
  export default {
    name: 'App',
    data() {
      return {
        window: {
          width: document.body.clientWidth,
          height: document.body.clientHeight
        }
      }
    },
    methods: {
      initWindow() {
        this.$store.dispatch('setWindow', this.window)
        window.onresize = () => {
          return (() => {
            this.window.width = document.body.clientWidth
            this.window.height = document.body.clientHeight
            this.$store.dispatch('setWindow', this.window)
          })()
        }
      }
    },
    created() {
      this.initWindow()
    }
  }

頁面用法：

  computed: {
    ...mapGetters({
      mainHeight: 'getMainHeight'
    }),
    chartStyle1() {
      const height = this.mainHeight * 0.24 - 6
      return {
        color: '#fff',
        width: '100%',
        height: height + 'px'
      }
    }
  },