代码js或vue3调整浏览器窗口大小

在JavaScript或Vue.js中，当需要调整浏览器窗口大小时，通常我们会监听`window`对象上的`resize`事件。这将允许我们在窗口尺寸变化时执行某些操作。以下是基本的步骤：

**JavaScript示例**:

window.addEventListener('resize', function() {
  // 当窗口大小改变时，这里的回调函数会被触发
  console.log('窗口大小已调整');
  // 在这里可以添加你想要响应窗口大小调整的逻辑，比如更新页面布局或重新渲染组件
});

**Vue.js 示例 (Vuex + Action)**
如果你正在使用Vue.js，并且想通过状态管理库Vuex来处理窗口大小更改，可以在actions中定义响应操作：

// 在store/modules/window.js
export const UPDATE_WINDOW_SIZE = 'UPDATE_WINDOW_SIZE';

const actions = {
  updateWindowSize({ commit }) {
    window.addEventListener('resize', () => {
      // 获取新的窗口尺寸并存储到状态中
      const newSize = { width: window.innerWidth, height: window.innerHeight };
      commit(UPDATE_WINDOW_SIZE, newSize);
    });
  }
};

// 在其他组件中，使用mapActions绑定这个action
this.$store.dispatch('updateWindowSize');

然后，在组件里订阅这个状态的变化：

<template>
  <div ref="myRef" :style="{ width: windowSize.width, height: windowSize.height }"></div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  computed: {
    ...mapState(['windowSize'])
  },
  methods: {
    ...mapActions(['updateWindowSize']),
    handleResize() {
      this.updateWindowSize();
    }
  },
  mounted() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  }
};
</script>

记得在`beforeDestroy`生命周期钩子中移除事件监听。