Как использовать глобальные переменные в настройках Vuetify 3

#vue.js #vuetify.js #vuejs3 #vue-composition-api #vuetifyjs3

Вопрос:

Я использую настройку 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

Ответ №1:

Вы не можете получить доступ к this внутренней setup части крючка, но вы можете использовать getCurrentInstance его для получения экземпляра приложения, содержащего конфигурацию :

 import { getCurrentInstance,onMounted } from 'vue'

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

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

Комментарии:

1. Именно то, что мне было нужно, спасибо! Редактировать: это дает мне значение null, когда я пытаюсь войти internalInstace в систему установки сразу после того, как я const internalInstance = getCurrentInstance по какой-то причине не использую метод, я проведу исследование, но есть идеи, почему это дает значение null?

2. попробуйте это внутри onMounted крючка, как onMounted(()=>{console.log(internalInstance)})