typescript - 如何将 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 forms上也是如此。

我已经确定了两种可能的解决方案：

1. 绕过 Vuetifyrules系统并允许简单地返回要在模板本身内翻译的字符串；
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 输入规则的上下文中，您将错误消息放在 getter 中的解决方案对我不起作用，我得到了这个：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 {
...
}