如何在Vue 2中实现响应式的matchMedia全局移动端检测？

直接给Vue.prototype赋值普通变量无法触发响应式更新，因为Vue的响应式系统仅对通过其内部机制定义的属性生效（比如组件data、Vue.observable对象、Vuex状态）。以下是几种可行的解决方案：

方法1：使用Vue.observable创建全局响应式对象 #

这是轻量且无需额外依赖的方案，适合小型项目：

// main.js
import Vue from 'vue'

// 创建全局响应式状态对象
Vue.prototype.$device = Vue.observable({
  isMobile: false
})

// 初始化媒体查询并监听状态变化
const mobileMediaQuery = window.matchMedia('(max-width: 768px)')

// 设置初始值
Vue.prototype.$device.isMobile = mobileMediaQuery.matches

// 监听媒体查询状态变更（比resize事件更高效，仅在状态切换时触发）
mobileMediaQuery.addEventListener('change', (e) => {
  Vue.prototype.$device.isMobile = e.matches
})

组件中使用：

<div>--{{ $device.isMobile }}--</div>

方法2：通过Vuex维护全局状态（适合已使用Vuex的项目） #

如果项目已经集成Vuex，可以将状态放到store中统一管理：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isMobile: false
  },
  mutations: {
    SET_IS_MOBILE(state, value) {
      state.isMobile = value
    }
  },
  actions: {
    initMobileStatus({ commit }) {
      const mobileMediaQuery = window.matchMedia('(max-width: 768px)')
      commit('SET_IS_MOBILE', mobileMediaQuery.matches)
      
      mobileMediaQuery.addEventListener('change', (e) => {
        commit('SET_IS_MOBILE', e.matches)
      })
    }
  }
})

在入口文件初始化：

// main.js
import Vue from 'vue'
import store from './store'
import App from './App.vue'

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

组件中使用：

<div>--{{ $store.state.isMobile }}--</div>

方法3：封装为Vue插件（模块化最优解） #

将设备检测逻辑封装成插件，便于复用和维护：

// plugins/device.js
export default {
  install(Vue) {
    // 创建响应式状态
    const deviceState = Vue.observable({
      isMobile: false
    })

    // 更新状态的工具函数
    const updateMobileStatus = (matches) => {
      deviceState.isMobile = matches
    }

    // 初始化并监听
    const mobileMediaQuery = window.matchMedia('(max-width: 768px)')
    updateMobileStatus(mobileMediaQuery.matches)
    mobileMediaQuery.addEventListener('change', (e) => updateMobileStatus(e.matches))

    // 挂载到Vue原型
    Vue.prototype.$device = deviceState
  }
}

在入口文件注册插件：

// main.js
import Vue from 'vue'
import DevicePlugin from './plugins/device'
import App from './App.vue'

Vue.use(DevicePlugin)

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

组件中使用方式同方法1：

<div>--{{ $device.isMobile }}--</div>

内容的提问来源于stack exchange，提问作者mcool