4、vue 中使用vuex 和 enquire.js

1.介绍Enquire.js

参考资料：

1：官网

2：其他资料

参考项目:ant-design-pro-vue :https://github.com/sendya/ant-design-pro-vue

2.动手实践

1、引入vuex,enquire.js

package.json:

"dependencies": {
    "ant-design-vue": "^1.3.16",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vuex": "^3.1.1",
    "babel-plugin-import-resolve": "0.0.5",
    "enquire.js": "^2.1.6"
  },

2、创建device.js

/**
 * @description:监控屏幕宽度
 * @author: SoOnPerson
 * @create: 2019-09-03
 **/
import enquireJs from 'enquire.js' // 引入enquire.js

export const DEVICE_TYPE = {
  DESKTOP: 'desktop',
  TABLET: 'tablet',
  MOBILE: 'mobile'
}

export const deviceEnquire = function (callback) {
  const matchDesktop = {
    match: () => {
      callback && callback(DEVICE_TYPE.DESKTOP)
    }
  }

  const matchLablet = {
    match: () => {
      callback && callback(DEVICE_TYPE.TABLET)
    }
  }

  const matchMobile = {
    match: () => {
      callback && callback(DEVICE_TYPE.MOBILE)
    }
  }
  /**
   * enquireJs.register(mediaQuery, handler).
   * mediaQuery: 字符串，需要响应的媒体。
   * handler: 函数或对象。
   * handler Object:
   * match: 函数。媒体匹配时的回调。
   */
  enquireJs
    .register('screen and (max-width: 576px)', matchMobile) // mobile: 宽度小于576px时判断为mobile
    .register('screen and (min-width: 577px) and (max-width: 1299px)', matchLablet) // 宽度介于577px - 1299px 时判断为平板电脑
    .register('screen and (min-width: 1300px)', matchDesktop) // 宽度大于1300px时判断为pc电脑
}

3、在App.vue中加入

mounted () {
    deviceEnquire(deviceType => {
      console.log('deviceType', deviceType)
    })
}

mounted 相关介绍https://cn.vuejs.org/v2/api/#mounted

4、运行，打开控制台Console，缩放浏览器宽度

到这里enquire.js的使用就那么多了，还需要将媒体的类型保存起来，就用到了Vuex

 

3.介绍Vuex

参考资料：

1：vuex文档

2：Vuejs中的状态管理说明

参考项目:ant-design-pro-vue :https://github.com/sendya/ant-design-pro-vue

4.动手实践

src/store/index.js

/**
 * @description: Vuex 状态管理
 * @author: SoOnPerson
 * @create: 2019-09-03
 **/
import Vue from 'vue'
import Vuex from 'vuex'

import getters from './getters'
import app from './modules/app'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    app
  },
  state: {

  },
  mutations: {

  },
  actions: {

  },
  getters
})

src/store/getter.js

/**
 * @description:store中使用到的计算属性
 * @author: SoOnPerson
 * @create: 2019-09-03
 **/
const getters = {
  device: state => state.app.device
}

export default getters

src/store/mutation-types.js

/**
 * @description: 将mutation归纳，避免耦合性
 * @author: SoOnPerson
 * @create: 2019-09-03
 **/
export const APP_TOKEN = 'Token'
export const APP_DEVICE = 'Device'

src/store/mudules/app.js

/**
 * @description: 项目的一些状态
 * @author: SoOnPerson
 * @create: 2019-09-03
 **/
import { APP_DEVICE } from '../mutation-types'

const app = {
  state: {
    device: 'desktop'
  },
  action: {
    Device ({ commit }, device) {
      // store.dispatch 触发 分发到mutations
      console.info('action Device')
      commit(APP_DEVICE, device)
    }
  },
  mutations: {
    Device: (state, device) => {
      // store.commit 触发
      console.info('mutations Device')
      state.device = device
    }
  }
}
export default app

App.vue

<template>
  <a-locale-provider :locale="zhCN">
    <div id="app">
      <h1>{{ device }}</h1>
    </div>
  </a-locale-provider>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import { APP_DEVICE } from './store/mutation-types'
import { deviceEnquire } from './util/device'
import { mapGetters } from 'vuex'

export default {
  name: 'App',
  components: {},
  data () {
    return {
      zhCN
    }
  },
  mounted () {
    deviceEnquire(deviceType => {
      console.log('deviceType', deviceType)
      // 媒体改变时 将新的状态传给store
      this.$store.commit(APP_DEVICE, deviceType)
    })
  },
  computed: {
    // 将 store 中的 getter 映射到局部计算属性
    ...mapGetters([
      'device'
    ])
  }
}
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store/' // 引入vuex状态管理
import './core/demand-loading' // 引入按需加载的组件
Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

运行项目：

可以直观的在页面上看到结果