internationalization - vue-i18n 中的动态本地化

Question

我想动态更新 vue-i18n 中的本地化消息。

我正在建立一个网上商店，其中每个商品都有更多语言的描述。所以我想要实现的是，当我从 REST API 获取网上商店商品时，我想将它们的名称、描述等放入 vue-i18n 中的消息对象中，以便它可以使用它们。 vue-i18n API 有什么办法可以处理这个问题吗？另外，我从服务器获取数据(我得到一个 Promise)，那么当我最终得到响应并将数据添加到本地化时，如何确保它在浏览器 View 中得到更新？

Answer 1

我所做的是编写一个 mixin，并在需要动态本地化的任何地方使用它:

export default {
  methods: {
    $t: function (translate) {
      if (typeof translate === 'string') {
        return this.$i18n.t(translate)
      } else if (translate === void 0) {
        return this.$i18n.t('loading')
      }
      return translate[this.$i18n.locale]
    }
  }
}

这样，当我的文本如下所示时，我可以调用 $t(text) (NOT $t('text') 当然):

data: function () {
   return {text: {en:'Book', de:'Buch', hu:'Könyv'}}
}

因此，在您的组件中，您必须导入它并将其添加为 mixin:

import dynamicLocalization from '@/components/mixins/dynamic-localization'

export default {
   ...
   mixins:[dynamicLocalization]
   ...
}