如何将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.use(VueI18n)和初始化Vue 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需要一个非常特定的执行上下文，该上下文与通常在fresh的根上下文中可访问的上下文不同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') }
}