Vuex处理页面当前的宽度与距离顶部的高度

全局 使用当前页面的宽度 与 距离顶部的高度

Vuex 模块里的代码

const widths = {
    namespaced: true,
    state: {
        currentWidths: 0,
        currentTopHeights: 0
    },
    mutations: {
        // 获取当前浏览器宽度/页面宽度
        currentWidth(state) {
            // 网页可见区域宽
            state.currentWidths = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            // 网页正文全文宽
            // state.currentWidth = window.outerWidth || document.documentElement.scrollWidth || document.body.scrollWidth;
            // 屏幕分辨率的宽
            // state.currentWidth = window.screen.width
        },
        // 获取当前距离顶部的高度
        currentTopHeight(state) {
            state.currentTopHeights = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        },

    },

    actions: {
        // 重新计算当前的高度
        resetCurrentWidth({ commit }) {
            commit("currentWidth")
            window.onresize = function windowResize() {
                commit("currentWidth")
            };
        },
        // 获取 距离顶部的高度
        resetCurrentTopHeight({ state, commit }) {
            window.addEventListener("scroll", () => {
                commit("currentTopHeight")
            })
        }
    },
    getters: {
        // 当前的宽度
        theCurrentWidth: function (state) {
            return state.currentWidths
        },
        // 当前距离顶部的高度
        theCurrentTopHeight: function (state) {
            return state.currentTopHeights
        }
    }
}

export default widths

使用页面

<template>
    <div class="home">
        宽： {{ currentWidths }}
        <br>
        <h1 class="title">这是 Home 页面 </h1>
        <h1 class="title">这是 Home 111 </h1>
        <h3 class="blues"> 高：{{ currentTopHeights }}</h3>
        <h1 class="title">这是 Home 222 </h1>

    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
    name: 'Home',

    data() {
        return {

        };
    },
    methods: {
		// 当前的页面的宽度
        initCurrentWidth() {
            this.$store.dispatch("widths/resetCurrentWidth")
        },
        // 当前页面的高度
        initCurrentTopHeight() {
            this.$store.dispatch("widths/resetCurrentTopHeight")
        },
        // 当前距离顶部高度大于 500 的时候 字体改变
        changeFontColor(val) {
            const item = document.querySelector('.blues')
            if (val >= 500) {
                item.classList.add("red")
                // item.style.color = "red"
            } else {
                item.classList.remove('red')
                // item.style.color = 'black'
            }
        }

    },
    
    created() {
        this.initCurrentWidth()
        this.initCurrentTopHeight()
    },
    mounted() {

    },
    computed: {
        ...mapGetters({
            currentWidths: "widths/theCurrentWidth",
            currentTopHeights: "widths/theCurrentTopHeight",
        }),
        ...mapState({
 
        })
    },
    watch: {
        currentTopHeights: function (newVal, oldVal) {
        console.log("当前距离顶部的高度", newVal)
            this.changeFontColor(newVal)
        }
    }
};
</script>

<style scoped lang="scss">
.home {
    .title {
        margin: 300px;
    }
}
.red {
    color: red;
    font-size: 36px;
}
</style>