在 nuxt 插件中使用 i18n答案

【问题标题】：Using i18n in nuxt plugin在 nuxt 插件中使用 i18n
【发布时间】：2019-08-20 07:30:01
【问题描述】：

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

// @/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"
/>

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

我已经在this example 之后安装了 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。如何在我的规则中访问翻译插件？

【问题讨论】：

标签： vue.js plugins translation vuetify.js nuxt.js

【解决方案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，使用combined inject 可能会更好。

【讨论】：

太棒了！谢谢