Как получить доступ к константе в main.js в другом файле js в рамках vue.js?

Question

У меня есть приложение vue.js и в файле main.js я настроил Vuei18n согласно документации. Это работает отлично, и чтобы получить доступ к этому в других компонентах, я добавил это к экземпляру new Vue(), и теперь он доступен (с this.$i18n).

Теперь я создал validator.js файл для правил проверки, и мне нужно использовать this.$i18n там, но он не работает. Я также пытался Vue.prototype.$i18n, но это тоже не работает. Может ли кто-нибудь помочь мне выяснить, где я ошибся?

Answer 1

экспорт переменной i18n

Я предполагаю, что ваше приложение является приложением vue-cli или, по крайней мере, вы используете веб-пакет для его сборки и, следовательно, можете использовать модули ES.

Работас vue-i18n вы бы сделали что-то вроде следующего:

// step 1: define the i18n object via new Vue18n
const i18n = new VueI18n({
  locale: DEFAULT_LANGUAGE,
  messages,
});

// step 2: setup the Vue object to use this object:
new Vue({
 i18n,
 ... store, router.... whatever
})

Где messages содержит все JSON с ключами и значениями перевода.

Я думаю, вы уже делаете что-то вродеthis.

И теперь, в вашем модуле валидатора вам нужен тот же самый объект i18n, который вы подключили к Vue.

Вместо того, чтобы пытаться добраться до Vue в вашем валидаторе, вы можетепросто export переменная i18n от main.js:

export {i18n}

Итак, в вашем файле validator.js вы можете просто import it:

import {i18n} from '@/main.js' // or whatever is the path

Именно так я решаю проблему интернационализации валидатора в своем собственном приложении.

Важное примечание: циклические зависимости

Если вывы уже импортируете validator.js в main.js, вы не сможете импортировать i18n с основногов вашем модуле валидатора.Чтобы избежать такой проблемы, вы бы переместили инициализацию и экспорт i18n в другой модуль, например i18n.js, чтобы валидатор и основной файл могли import независимо друг от друга.

Без модулей es6

В случае, если вы не используете веб-пакет или другой пакет для объединения вашего кода, вы все равно можете просто экспортировать объект i18n в объект window:

window.i18n = i18n

и затем используйте его из любого файла.Вам просто нужно быть осторожным, чтобы сохранить объект i18n в window, прежде чем какой-либо файл попытается получить к нему доступ.

Answer 2

Я думаю, что вы ищете, пользовательские события. В соответствии с этой документацией , вы должны иметь возможность выдавать переменную примерно так:

this.$emit('send-i18n', this.$i18n)

Тем не менее, в соответствии с документацией, попробуйте использовать v-on:send-i18n для восстановления вашей ценности.

Надеюсь, это сработает.