vue中window.onresize的使用解析

<script>
export default {
  name: 'app',
  mounted () {
    window.onresize = () => {
      this.clientWidthResize()
    }
  },
  methods: {
    clientWidthResize () {
      this.$store.commit('Tool/resizeWidth', Number(document.documentElement.clientWidth))
    }
  }
}
</script>

export default {
  namespaced: true,
  state: {
    clientWidth: 0
  },
  getters: {},
  mutations: {
    resizeWidth(state, clientWidth) {
      state.clientWidth = clientWidth;
    },
  },
  actions: {},
}

computed: {
  clientWidth () {
    return this.$store.state.Tool.clientWidth || Number(document.documentElement.clientWidth)
  }
},
watch: {
  clientWidth (val) {
    console.log(val)
  }
},

 window.onresize = function(){....}

// 获取到的是变更后的页面宽度
var currentWidth = document.body.clientWidth; 

var firstOnResizeFire = true;//谷歌浏览器onresize事件会执行2次，这里加个标志位控制
 
window.onresize = function()
{
 if (firstOnResizeFire) {
  NfLayout.tabScrollerMenuAdjust(homePageWidth);
  firstOnResizeFire = false;
  
  //0.5秒之后将标志位重置（Chrome的window.onresize默认执行两次）
  setTimeout(function() {
   firstOnResizeFire = true;
        }, 500);
 } 
 homePageWidth = document.body.clientWidth; //重新保存一下新宽度
}