在 nuxt 插件中使用 i18n

Question

我在 vuetify 中使用 nuxt，并在一个文件中定义了所有验证规则（用于文本输入），如下所示：

// @/plugins/form_validations.js

export default Object.freeze({
  VALIDATIONS: {

    FIRSTNAME: [
      v => !!v || 'Firstname is required',
      v => (v && v.length >= 3) || 'Firstname must be at least 3 characters'
    ],

    // ...
})

我在我的组件中使用它们，如下所示：

import FormValidations from '@/plugins/form_validations.js'

export default {
  data() {
   firstnameRules: FormValidations.VALIDATIONS.FIRSTNAME
  }
}

<v-text-field
   v-model="firstname"
   :rules="firstnameRules"
/>

我现在想根据语言环境翻译此规则的文本。

我已经按照这个例子安装了 i18n并且可以在我的组件中很好地使用它，例如像这样：

<v-text-field
   ref="firstname"
   v-model="firstname"
   :label="$t('firstname')"
   :rules="firstnameRules"
    required />

但是，我无法直接在我对所有规则进行分组的文件中使用翻译插件。我已经看到使用 nuxt 您可以访问插件中的上下文，如下所示：

export default ({ app, store }) => {
}

但是我无法以这种格式使用 Object.freeze 定义我的常量。

我也试过这个：

import i18n from '@/plugins/i18n.js'

export default Object.freeze({
  VALIDATIONS: {
    FIRSTNAME: [
      v => !!v || i18n.t('firstname_required'),
    ],
}

但是我得到一个错误，函数t没有定义。如何在我的规则中访问翻译插件？

Answer 1

我面临几乎相同的问题，这是我的解决方案：

// @/plugins/validation-rules.js

export default ({app}) => {

  let i18n = app.i18n

  // You can use `this.$rules` anywhere in the Nuxt app.
  Vue.prototype.$rules = {
    required: [v => !!v || i18n.t('required')]
  }
}

<v-text-field
      v-model="email"
      :rules="this.$rules.required"
      label="E-mail"
      required
      ref="emailField"
></v-text-field>

当我在语言切换器中更改语言时，错误消息不会以您切换的语言显示，您必须在输入字段中重新输入错误的电子邮件，但错误消息会以正确的语言显示。

我也不确定Vue.prototype，最好使用组合注入。