基于组件值的 vue-i18n sharedMessages 似乎不起作用

Question

我们有一些 VueJS 组件，它们为我们可以根据路由参数从服务器获取的所有资源呈现内容。所有资源都由它们自己的类表示（为此我们使用vue-api-query）。

基本上，我们拥有的任何资源都定义如下：

export default class Invoices extends Model {
    resource() {
        return 'invoices';
    }

    get i18n() {
        return {
            en: {
                resource: 'Invoice | Invoices'
            },
            nl: {
                resource: 'Factuur | Facturen'
            }
        };
    }
}

当我们有一个特定于资源的组件时，我们希望执行以下操作：

<template>
   <div>
      Title could go here: Lis of all {{$tc('resource', 2}}
    </div>
</template>

<script>
    import models from './models';

    export default {
        data() {
            return {
                resource: new models[this.$route.params.resource](); 
            };
        }, 
        i18n: {
            sharedMessages: this.resource.i18n
        }
    }   

这似乎不起作用。 我还尝试使用函数拉入 sharedMessages：

i18n: {
    sharedMessages: () => { return this.resource.i18n; }
}

这也没有解决。 看起来我们无法以这种方式使用它。 我仔细检查并打印 `{{resource.i18n.en.resource}} 正确打印了我期望的字符串。

对我正在监督或根本不受支持的任何想法以及获得我们正在寻找的结果的解决方法？

刚刚也为它创建了一个CodeSandBox。

再次感谢！ 大卫

Answer 1

你在这里只漏掉了一件事。 i18n 在 vue 组件中的 data() 之前工作。所以 this.resource 不起作用。

要解决它，你可以像下面这样使用它：

export default {
  name: "App",
  data() {
    return {
      resource: new TestClass()
    };
  },
  i18n: {
    messages: {
      en: {
        local: "Local message in English"
      },
      nl: {
        local: "Lokaal bericht in het Nederlands"
      }
    },
    sharedMessages: new TestClass().i18n,
  }
};

如果你想继续处理数据，你可以使用mergeLocaleMessage。

import i18n from '@/i18n.js'; //your plugin path.
i18n.mergeLocaleMessage(i18n.locale, this.resource.i18n[i18n.locale]);