為了避免重復(fù)計(jì)算，通過(guò)store保存的方式一次計(jì)算干像，多處引用
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) {
// 監(jiān)聽(tīng)屏幕高度變化
this.$store.commit("screenheight", val);
},
},
store中的index.js
const state = {
screenheight: 800, //屏幕高度
}
//計(jì)算state的值 獲取: this.$store.getters.xxxx
const getters = {
// 計(jì)算屏幕高度
screenheight(state){
return state.screenheight
}
}
// 數(shù)據(jù)更新 使用: this.$store.commit('函數(shù)名','val')
const mutations = {
// 計(jì)算屏幕高度
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) {
// 監(jiān)聽(tīng)屏幕高度變化
this.tableheight = val - 70;
},
},
