VUE中屏幕宽高实时计算

为了避免重复计算，通过store保存的方式一次计算，多处引用

main.js文件

 data() {
    return {
      screenHeight: document.documentElement.clientHeight, //屏幕高度
    };
  },
 mounted() {
    var _this = this;
    window.onresize = function () {
      // 定义窗口大小变更通知事件
      _this.screenHeight = document.documentElement.clientHeight; //窗口高度
    };
    this.$nextTick(() => {
      this.$store.commit("screenheight", _this.screenHeight);
    });
  },
  watch: {
    screenHeight(val) {
      // 监听屏幕高度变化
      this.$store.commit("screenheight", val);
    },
  },

store中的index.js

const state = {
  screenheight: 800,  //屏幕高度
}

//计算state的值  获取: this.$store.getters.xxxx
const getters = {
  // 计算屏幕高度
  screenheight(state){
    return state.screenheight
  }
}

// 数据更新 使用: this.$store.commit('函数名','val')
const mutations = {
   // 计算屏幕高度
   screenheight(state, data){
    state.screenheight = data
  }
};

使用

import { mapGetters } from "vuex";

export default {
  data() {
    return {
      tableheight: this.$store.state.screenheight - 70,
    };
  },
  computed: {
    ...mapGetters(["screenheight"]),
  },
  watch: {
    screenheight(val) {
      // 监听屏幕高度变化
      this.tableheight = val - 70;
    },
  },