typescript - 如何在 Vue 类组件中使用 vue-i18n？

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.use(VueI18n) 和 new Vue({/* ... */, i18n }) 初始化 Vue。 i18n 对象以这种方式初始化:

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

只要不立即调用翻译，例如在模板或组件方法中，翻译就可以很好地工作。

这vue-i18n issue似乎暗示存在初始化问题。
我可以通过使用方法并只在模板中进行翻译来解决这个问题，但是有一个我无法控制的特定实例，在该实例中会发生此类即时调用:Vuetify input 规则。

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

这些规则会立即执行，即使在 Vuetify forms 上使用了惰性验证 .

我确定了两种可能的解决方案:

1. 绕过 Vuetify 规则 系统并允许简单地返回一个字符串以在模板本身内进行翻译；
2. 解决 $t 即时可用性问题。

遗憾的是，我无法完成其中任何一项。

有什么办法可以解决这个问题吗？

Answer 1

问题出在this的使用上。
基本上，Vue 需要一个非常具体的执行上下文，它与通常在新 class 的根上下文中可访问的上下文不同。

解决方案最终变得非常简单:使用 setter/getter 。

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') }
}