为了避免重复计算，通过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;
},
},
