Vue2.0针对设备调节显示内容方法

一晚上完成0.2.2、0.3.0、0.3.1三个版本的更新，很高兴，总结一下
项目地址： 穆音博客
文章首发地址：Vue针对设备调节显示

Vue中进行优化的方式

总体来说有两种方法，其一是css的媒体查询，另一种是vue-mq库进行对设备断点，从而区分不同的设备，我这里用的是mq库进行。以下是使用方法：

导入mq

使用vue进行导入
npm install vue-mq
之后修改 main.js中的内容

// main.js
import Vue from 'vue';
import VueMq from 'vue-mq';

Vue.use(VueMq, {
  breakpoints: {  // 设置设备信息断点
    mobilePortrait: 320,
    mobileLandscape: 480,
    tabletPortrait: 768,
    tabletLandscape: 1024,
    desktop: Infinity,
  },
});

配置mq

由于Vue-MQ 库本身并不提供与 Vuex 的集成，因此无法直接从 Vuex 中获取设备信息。我们需要修改store/index.js中的信息来完成配置

// store.js

const store = new Vuex.Store({
  state: {
    device: 'desktop', // 初始值为桌面设备
    // 其他状态...
  },
  mutations: {
    updateDevice(state, device) {
      state.device = device;
    },
    // 其他 mutations...
  },
  // 其他配置项...
});

在根组件中监听设备变化情况，根据窗口大小完成信息更新

// App.vue

<template>
  <div id="app">
    <!-- 页面内容 -->
  </div>
</template>
<script>
export default {
  mounted() {
    window.addEventListener('resize', this.updateDevice);
    this.updateDevice(); // 初始更新设备信息
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateDevice);
  },
  methods: {
    updateDevice() {
      const isMobile = window.innerWidth <= 768; // 根据实际情况判断设备类型
      this.$store.commit('updateDevice', isMobile ? 'mobile' : 'desktop');
    },
  },
};
</script>

页面内使用

在需要使用的页面内完成导入，使用 mapState 辅助函数来获取设备信息：

// MyComponent.vue

<template>
  <div class="my-component">
    <div v-if="isMobile">
      <!-- 移动设备界面 -->
    </div>
    <div v-else>
      <!-- 非移动设备界面 -->
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['device']),
    isMobile() {
      return this.device === 'mobile';
    },
  },
};
</script>

<style>
/* 样式 */
</style>

在上面的示例中，我们使用 mapState 辅助函数来将设备信息状态 device 映射到组件的计算属性中。然后，在模板中使用 isMobile 计算属性来根据设备信息判断是否为移动设备，并相应地渲染不同的界面。
当然，也可以使用之前设置的断点进行配置，比如

<template>
  <div class="my-component">
    <!-- 大屏设备的内容 -->
    <div v-if="$mq === 'desktop'">
      <!-- 大屏设备特定的内容 -->
    </div>
<!-- 移动设备内容 -->
    <div v-else-if="$mq === 'mobilePortrait' || $mq === 'mobileLandscape'">
    </div>
    <!-- 小屏设备的内容 -->
    <div v-else>
      <!-- 小屏设备特定的内容 -->
    </div>
  </div>
</template>