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)（NOT $t('text') 当然）：

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

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

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

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

vue-i18n 中的动态本地化

Dynamic localization in vue-i18n

internationalization

vuejs2

vue-i18n