Vue3 использует глобальную переменную в файлах js
У меня есть некоторые глобальные переменные в проекте Vue3, определенные как:
app.config.globalproperties.$locale = locale
затем создается компонуемый для динамического возврата глобальной переменной:
import { getCurrentInstance ) from 'vue'
export function useGlobals(type) {
const app = getCurrentInstance()
const global = app.appContext.config.globalProperties[`$${type}`]
return { global }
}
затем импортируются и выполняются компонуемые компоненты vue:
import { useGlobals } from '../path'
const { global } = useGlobals('locale')
теперь можно использовать глобальную переменную.
Но проблема возникает, когда я импортирую составные файлы в js, там appContext не определено.
Мой вопрос: есть ли способ получить глобальную переменную или appContext в js файлах?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
вместо того, чтобы создавать свои компонуемые для получения глобальных реквизитов, вы можете использовать механизм предоставления/внедрения.
ознакомьтесь с документацией здесь: https://vuejs.org/api/composition-api-dependency-injection.html#provide
эй, приятель, я знаю о функциях предоставления/внедрения. Но это работает только в файлах vue, а не в js. В любом случае спасибо за помощь. ваше здоровье :)
@NikolaPavicevic Но ваше решение использует getCurrentInstance(), который также работает только в контексте экземпляра компонента Vue (а не любого файла .js).
@ tony19 эй, приятель, ты прав, но я сказал в вопросе, что это не работает в файлах js :) Но решение, благодаря комментарию tao, не использует getCurrentInstance(). В файлах js мне не нужна компонуемая только что экспортированная переменная.
Благодаря отличному предложению от @tao (кстати, невозможно получить appContext из приложения, но это дает мне представление :)) проблема решена.
Я создал еще один экспорт в main.js после создания приложения со всеми глобальными свойствами:
const globals = app.config.globalProperties
export { globals }
или как функция (еще одно предложение @tao):
export const useGlobals = () => app.config.globalProperties
Теперь мы можем импортировать глобальные переменные в любой js файл и использовать его как:
import { globals } from '../path'
globals.$locale
или из функции:
import { useGlobals } from '../path'
const { $locale } = useGlobals()
Ты прав. Нет appContext на app. Лично я бы использовал функцию: export const useAppConfig = () => app.config. И используйте его как const { globalProperties } = useAppConfig(). Таким образом, вы можете быть уверены, что получите содержимое globalProperties при вызове функции, а не при экспорте конфигурации. В большинстве случаев globalProperties не меняется после монтирования приложения, но если плагин добавляется динамически, вы не получите добавленных им глобальных реквизитов, потому что config был экспортирован раньше. Имеет смысл?
@tao Да, да, это имеет большой смысл. Еще раз спасибо!! В моем случае глобальные переменные создаются при монтировании приложения, никаких дополнительных. Но экспорт как функция намного лучше. Я перейду на него, ура :)
А вы пробовали
export const { appContext } = appвmain.js? Должно сработать.