全局计算属性混入中无法使用Vuetify断点问题排查

我经常需要使用this.$vuetify.breakpoints，因此将其封装为全局混入：

/*
@/main.js
*/

// 声明混入
Vue.mixin({
  computed: {
    isOnPC () {
      console.log(this.$vuetify.breakpoint.mdAndUp)  // 此处日志输出正确
      return this.$vuetify.breakpoint.smAndUp
    }
  }
})

// 挂载Vue实例
new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

之后我在组件中直接使用这个计算属性：

<!--
  @/views/View.vue
-->

<template>
  <div>
    <!-- 渲染了错误的组件 -->
    <!-- Vue开发者工具中显示`isOnPC`值不正确 -->
    <WideComponent v-if="isOnPC" />
    <NarrowComponent v-else />
  </div>
</template>

请问我忽略了什么？

原因与解决方案 #

核心问题是你在混入的计算属性里返回了错误的断点属性：

• 你日志里打印的是mdAndUp（对应中等屏及以上，也就是通常意义的PC设备），但实际返回的却是smAndUp（对应小屏及以上，包含平板甚至大屏手机），两者的断点阈值完全不同，自然会导致判断逻辑和预期不符。
• Vuetify默认断点阈值：sm是≥600px，md是≥960px，这两个属性的覆盖范围差异很大。

修正后的混入代码如下：

/*
@/main.js
*/

// 声明混入
Vue.mixin({
  computed: {
    isOnPC () {
      // 返回和日志一致的mdAndUp，匹配PC级设备的断点范围
      return this.$vuetify.breakpoint.mdAndUp
    }
  }
})

// 挂载Vue实例
new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

如果你的需求确实是基于smAndUp来判断，那需要排查两个点：

1. 组件内部是否有同名的计算属性isOnPC，覆盖了全局混入的属性
2. 项目中是否自定义修改了Vuetify的断点阈值配置

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