使用vuex3来对窗口的高度宽度进行监听

郭冀鑫(๑*◡*๑)

于 2024-08-11 02:06:21 发布

阅读量247

点赞数 2

文章标签：前端 javascript 数据库

本文链接：https://blog.csdn.net/guojixin12/article/details/141099254

版权

vuex中的代码


    state: {
        windowHeight: window.innerHeight,
        windowWidth: window.innerWidth,
    },

    mutations: {
        setWindowHeight(state, height) {
            state.windowHeight = height;
        },
        setWindowWidth(state, width) {
            state.windowWidth = width;
        },
    },

    actions: {
        updateWindowDimensions({ commit }) {
            commit('setWindowHeight', window.innerHeight);
            commit('setWindowWidth', window.innerWidth);
        },
        listenToWindowResize({ dispatch }) {
            window.addEventListener('resize', () => {
                dispatch('updateWindowDimensions');
            });
        },
    },

    getters: {
        getWindowHeight: (state) => state.windowHeight,
        getWindowWidth: (state) => state.windowWidth,
    },

应用层面的代码

<template>
  <div>
    {{windowHeight}}
  </div>
</template>

<script>
export default {
  name: 'RightNavigation',

  // 页面访问次数较多，使用计算属性存储一下
  computed: {
    windowHeight() { // 更新后的窗口高度
      return this.$store.getters.getWindowHeight;
    },
    windowWidth() { // 更新后的窗口宽度
      return this.$store.getters.getWindowWidth;
    }
  },

  created() { // 手动启动一下监听窗口的宽度高度变化
    this.$store.dispatch('listenToWindowResize');
  },

}
</script>