如何在 Vue class 组件中使用 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 rules.

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

这些规则会立即执行，即使 Vuetify forms 上有 lazy-validation。

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

绕过 Vuetify rules 系统并允许简单地 return 在模板本身内翻译一个字符串；
解决 $t 即时可用性问题。

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

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

Answer 1

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

的根上下文中可访问的上下文不同。

解决方案最终非常简单：使用 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') }
}

Answer 2

你将错误消息放在 getter 中的解决方案在 Vuetify 输入规则的上下文中对我不起作用，我得到这个：Error in beforeMount hook: "TypeError: Cannot read property '_t' of undefined"

我设法让它以两种可能的方式工作：

使用 getter，但对于整个规则数组：

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

将规则放在@Component 装饰器中：

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

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

How to use vue-i18n with Vue class components?

typescript

vue.js

vuetify.js

vue-i18n

vue-class-components