Vue 2 + Vuetify 2中如何用Composition API访问并操作this.$vuetify？

在Vue 2的Composition API中无法直接访问this，但可以通过以下方式读取和修改$vuetify.dark，同时支持模板内和外部操作：

1. 在组件setup中获取Vuetify实例 #

使用getCurrentInstance获取全局或当前组件的Vuetify实例：

import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const instance = getCurrentInstance()
    // 获取全局Vuetify实例（推荐，全局生效）
    const vuetify = instance.appContext.config.globalProperties.$vuetify
    // 也可以通过组件代理获取（当前组件上下文）
    // const vuetify = instance.proxy.$vuetify

    // 后续操作基于这个vuetify实例
  }
}

2. 读取暗黑模式状态 #

Vuetify的dark属性本身是响应式的，你可以直接使用，也可以包装为ref方便扩展：

import { getCurrentInstance, ref, watch } from 'vue'

setup() {
  const instance = getCurrentInstance()
  const vuetify = instance.appContext.config.globalProperties.$vuetify

  // 方式1：直接使用vuetify.dark（自带响应式）
  // 方式2：包装为ref，同步状态变化
  const isDark = ref(vuetify.dark)
  
  // 监听全局dark状态变化，同步到isDark
  watch(() => vuetify.dark, (newVal) => {
    isDark.value = newVal
  })

  // 暴露给模板使用
  return {
    isDark,
    vuetify
  }
}

3. 修改暗黑模式状态 #

直接修改vuetify.dark的值即可，全局状态会自动同步：

setup() {
  // ... 前面的代码

  const toggleDarkMode = () => {
    vuetify.dark = !vuetify.dark
  }

  return {
    isDark,
    toggleDarkMode
  }
}

4. 模板内操作 #

在模板中直接使用暴露的变量或方法：

<template>
  <!-- 直接绑定到vuetify.dark -->
  <v-switch v-model="vuetify.dark" label="切换暗黑模式"></v-switch>

  <!-- 或者使用包装后的isDark，同步状态 -->
  <v-switch
    v-model="isDark"
    label="切换暗黑模式"
    @change="vuetify.dark = isDark"
  ></v-switch>
</template>

5. 组件外部操作 #

如果需要在工具函数、Vuex等外部场景修改，可以直接从Vue全局原型获取Vuetify实例：

// 示例：utils/darkMode.js
import Vue from 'vue'

// 切换暗黑模式
export const toggleDarkMode = () => {
  Vue.prototype.$vuetify.dark = !Vue.prototype.$vuetify.dark
}

// 获取当前暗黑模式状态
export const getDarkStatus = () => {
  return Vue.prototype.$vuetify.dark
}

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