Vue中实现全局监听屏幕宽高

1.要全局实现监听屏幕宽高的话需要使用vue,

实现宽度

在App.vue中编写,通过window.onresize监听初始宽度,保存进state中

  mounted() {
    let _this = this;
    window.onresize = function () {
      // 定义窗口大小变更通知事件
      // console.log(document.documentElement.clientWidth, "====12=");
      _this.$store.state.user.screenWidth =
        document.documentElement.clientWidth; //窗口宽度
    };
  },

在vuex的state中定义宽度

const user = {
 state: {
    screenWidth:document.documentElement.clientWidth, //屏幕宽度
  },
}
export default user

在页面使用:

import { mapGetters } from "vuex";

  data() {
    return {
    devicewidth: document.documentElement.clientWidth,
    };
  },

  // 监听属性 类似于data概念
  computed: {
    ...mapGetters(["user"]),
  },

  watch: {
    "$store.state.user.screenWidth": function (val) {
      //监听屏幕宽度变化
      console.log(val, "=====");
    },
  },