在 nuxt.js 插件中调用 $t 函数

Question

我正在构建一个 nuxt.js 应用程序。所以我的计划是注入被重用到上下文的辅助对象和函数。

所以我创建了一个插件

export default (context) => {
     const { $t } = context.app;

     const validators = {
      firstNameRules: [
         v => !!v || $t('formValidation.NO_FIRST_NAME'),
         v => v.length < 128 || $t('formValidation.INVALID_FIRST_NAME_TOO_LONG')
       ]
     };

     context.$formValidators = validators;
}

对象被正确地注入到上下文中，我可以在我想要的地方访问规则。 但是尝试运行 $t 函数会导致错误

Cannot read property '_t' of undefined 

所以基本上我想运行 $t 函数并在发生事情时获取本地化消息。这可能吗？如果可以，怎么做？

Answer 1

所以我最终设法解决了它。

所以问题在于this 在 JS 中的行为方式?

我把代码改成这样：

export default function(context) {
  function getValidators() {
    return {
      firstNameRules: [
        v => !!v || this.$t('formValidation.NO_FIRST_NAME'),
        v => v.length < 128 || this.$t('formValidation.INVALID_FIRST_NAME_TOO_LONG')
      ]
    };
  }

  Vue.prototype.$formValidators = getValidators;
  context.$formValidators = getValidators;
}

然后从我的组件/页面

data() {
  const { firstNameRules } = this.$formValidators();
}

这样做，this 一直保留到 $t 函数

Answer 2

尝试使用inject：

export default (context, inject) => {
  const { $t } = context.app;
  const validators = {
    firstNameRules: [
      v => !!v || $t('formValidation.NO_FIRST_NAME'),
      v => v.length < 128 || $t('formValidation.INVALID_FIRST_NAME_TOO_LONG')
    ]
  };

  context.$formValidators = validators;
  inject('formValidators', validators);
};