vue.js - 如何在设置 Vuetify 3 中使用全局变量

Question

我使用 vue 3 设置，我想访问我使用的全局变量 vuetify。我可以在 config.globalVariable 中看到它，但我不能在设置中使用它。

{_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …}
component: ƒ component(name, component)
config: Object
compilerOptions: (...)
errorHandler: undefined
globalProperties:
$vuetify: {defaults: {…}}
$messageSystem: {addMessage: ƒ}
__proto__: Object
isNativeTag: (tag) => {…}
...

如您所见，我看到了 $vuetify，但在设置中我无法访问它。

    setup() {
       ...
       this.$vuetify.theme.dark = true; 
       ...

这是我访问全局变量的方式吗？

我得到的错误： Cannot read property '$vuetify' of undefined

标签： vue.jsvuetify.jsvuejs3vue-composition-apivuetifyjs3

Answer 1

您无法访问钩子this内部，但您可以使用它来获取包含配置的应用程序实例：setupgetCurrentInstance

import { getCurrentInstance,onMounted } from 'vue'

export default {
  setup() {
    const internalInstance = getCurrentInstance()

    onMounted(()=>{
      nternalInstance.appContext.config.globalProperties.$vuetify.theme.dark=true
   })
  }