vue-i18n中的动态定位

Question

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

我正在建立一个网络商店，在那里每个项目都有更多的语言描述。因此，我想要实现的是，当我从REST中获得webshop项目时，我希望将它们的名称、描述等放在vue-i18n中的messages对象中，以便它能够与它们一起工作。vue-i18nAPI有什么可以处理的吗？另外，我正在从服务器获得数据(我得到了一个承诺)，所以当我最终得到响应并将数据添加到本地化时，如何确保它在浏览器视图中得到更新？

Answer 1

我所做的就是编写一个混合器，并在需要动态本地化的任何地方使用它：

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'}}
}

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

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

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