如何在Vue 2中实现类computed的全局响应式变量？

针对你需要把Screen.lt.sm做成全局响应式变量的需求，提供三种实用方案：

方案一：全局Mixin（推荐，无额外依赖） #

直接通过Vue全局Mixin注入computed属性，所有组件可直接使用：

1. 在项目入口文件（如main.js）中添加：

import Vue from 'vue'
import { Screen } from 'quasar'

Vue.mixin({
  computed: {
    isMobileSize() {
      return Screen.lt.sm
    }
  }
})

2. 使用方式：
   在任意组件的模板或脚本中直接调用this.isMobileSize，它会像原生computed一样，随Quasar Screen的窗口尺寸变化自动更新。

方案二：封装响应式工具类（支持非组件场景） #

如果需要在工具函数、Vuex等非组件环境中使用，可封装一个可观察对象：

1. 创建src/utils/responsive.js：

import Vue from 'vue'
import { Screen } from 'quasar'

// 创建可观察的响应式对象
const responsiveState = Vue.observable({
  get isMobileSize() {
    return Screen.lt.sm
  }
})

// 监听Screen的resize事件，确保非响应式上下文也能触发更新
Screen.on('resize', () => {
  Vue.nextTick()
})

export default responsiveState

2. 使用方式：

• 组件中：

import responsiveState from '@/utils/responsive.js'

export default {
  computed: {
    isMobileSize() {
      return responsiveState.isMobileSize
    }
  }
}

• 非组件环境（如工具函数）：

import responsiveState from '@/utils/responsive.js'

function checkMobile() {
  return responsiveState.isMobileSize
}

方案三：Vuex集成（已用Vuex项目可选） #

如果项目使用Vuex，可通过getters实现全局共享：

1. 在Vuex模块中添加（如store/modules/responsive.js）：

import { Screen } from 'quasar'

export default {
  namespaced: true,
  getters: {
    isMobileSize: () => Screen.lt.sm
  }
}

2. 在入口文件注册模块后，组件中使用：

export default {
  computed: {
    isMobileSize() {
      return this.$store.getters['responsive/isMobileSize']
    }
  }
}

关键提示 #

Quasar的Screen.lt.sm本身已内置窗口监听，只要在Vue的响应式上下文（computed、模板）中引用，就能自动实现实时更新，无需额外手动监听resize事件（除非在非响应式环境中使用）。

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