vue-cli中实现响应式布局的方法

yarn add vuex

state: {
  screenWidth: document.documentElement.clientWidth,
  screenHeight: document.documentElement.clientHeight
 }

mutations: {
  setWidth (state, value) {
   state.screenWidth = value
  },
  setHeight (state, value) {
   state.screenHeight = value
  }
 }

import { mapState, mapMutations } from 'vuex'

mounted () {
  window.Onresize= () => { 
   this.setWidth(document.documentElement.clientWidth) 
  }
}

//根据screenWidth提供不同的class名
   电影
   影院
   个人中心

computed: {
  ...mapState('stylesheet', ['screenWidth']),
  computedPhone () {
   if (this.screenWidth <1024) {
    return 'mobile'
   } else {
    return 'computer'
   }
  }
 }