Как использовать vue-i18n с компонентами класса Vue?

Question

Следующий код:

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class SomeComponent extends Vue {
  public someText = this.$t('some.key')
}

Выдает ошибку:

[Vue warn]: Error in data(): "TypeError: i18n is undefined"

Я убедился, чтобы инициализировать Vue с Vue.use(VueI18n) а также new Vue({ /* ... */, i18n }), i18n Объект инициализируется следующим образом:

new VueI18n({
  locale: DEFAULT_LOCALE, // imported
  fallbackLocale: 'en',
  messages // imported
})

Переводы прекрасно работают, если их не вызывать сразу, например, в шаблонах или в компонентных методах.

Эта проблема vue-i18n, кажется, подразумевает, что есть проблема инициализации.
Я мог бы обойти это, используя методы и переводя только в шаблонах, но есть определенный экземпляр вне моего контроля, в котором происходят такие немедленные вызовы: Vuetify input rules,

someRule = [(v) => !!v || this.$t('field.must_not_be_empty')]

Эти правила выполняются немедленно, даже при lazy-validation на формах Vuetify.

Я определил два возможных решения:

1. Обойти Vuetify rules система и позволяющая просто возвращать строку для перевода внутри самого шаблона;
2. Решая $t проблема немедленной доступности.

К сожалению, я не смог выполнить ни одного из них.

Есть ли способ решить эту проблему?

Answer 1

Проблема заключалась в использовании this,
В основном, Vue нужен очень специфический контекст выполнения, который не совпадает с тем, что обычно доступно в корневом контексте нового class,

Решение оказывается очень простым: используйте геттер.

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class SomeComponent extends Vue {
  public get someText () { return this.$t('some.key') }
}

Answer 2

Ваше решение с размещением сообщения об ошибке в геттере не сработало для меня в контексте правил ввода Vuetify, я получаю следующее: Error in beforeMount hook: "TypeError: Cannot read property '_t' of undefined"

Мне удалось заставить его работать двумя способами:

1. Используйте геттер, но для всего массива правил:

get someRules() {
    return [
        (v) => !!v || this.$t('field.must_not_be_empty')
    ];
}

2. Поместите правила в декоратор @Component:

@Component({
    data() {
        return {
            someRules: [
                (v) => !!v || this.$t('field.must_not_be_empty')
            ]
        };
    }
})
export default class SomeComponent extends Vue {
...
}