internationalization - vue-i18n 中的动态定位

Question

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

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

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)（当然不是 $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]
   ...
}