如何使用 VueI18n 进行基于组件实例的国际化？

Question

我在不使用 npm 的情况下构建 Vue 应用程序。由于提到 npm 的指南太多，我无法正确遵循它们。所以，我只包含了这样的脚本：

    <script src="/js/bluebird.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/vue-i18n.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/components.js"></script>
    <script src="/js/app.js"></script>

现在我正在尝试通过从 json 文件加载它们来显示按钮列表。该文件包含带有按钮信息的对象数组，包括不同语言的文本。所以，现在我无法理解如何从该文件中让 vue-i18n 加载消息。基本代码：

            <buttons-list inline-template>
                <div class="buttons-list">
                    <big-button inline-template
                        :class="[button.position, button.number]"
                        v-for="button in buttons"
                        :key="button.id"
                        :button="button">
                        <div class="big-button">{{ $t(button.text) }}</div>
                    </big-button>
                </div>
            </buttons-list>

buttonsList组件代码：

Vue.component('buttons-list', {
    data: function() {
        return {
            buttons: []
        }
    },
    created: function() {
        this.loadButtons()
    },
    methods: {
        loadButtons: function() {
            const list = this;
            axios.get('/json/buttons.json')
            .then(function(response) {
                list.buttons = response.data
            })
        }
    }
})

在这里，我在创建组件时读取了 json 文件，因此当创建 bigButton 时，button 属性将拥有所有必需的信息。 bigButton 组件代码：

Vue.component('big-button', {
    data: function() {
        return {
            text: ''
        }
    },
    props: ['button'],
    created: function() {            
        this.$i18n.setLocaleMessage('en', this.button.messages.en)
        this.$i18n.setLocaleMessage('ru', this.button.messages.ru)
    },
    i18n: {
        messages: {}
    }
})

在这里，在 created 函数中，我尝试将实例的 i18n.messages 设置为来自 json 文件的数据。基本上，这是有效的，除了它会将所有按钮的 messages 重置为当前数据，最终所有按钮都具有相同的最后一个按钮的文本。是否可以在 vue-i18n 中使用组件实例？或者还有其他我想念的方法吗？

解决方案

我已将 bigButton 组件代码更改为：

Vue.component('big-button', {
    data: function() {
        return {
            text: ''
        }
    },
    props: {
        button: {
            type: Object,
            default: function() {return {}}
        },
    },
    created: function() {
        this.$i18n.setLocaleMessage('en', this.button.messages.en)
        this.$i18n.setLocaleMessage('ru', this.button.messages.ru)
    },
    i18n: {
        //i18n stops working when this block removed
    }
})

成功了！

Answer 1

VueI18n 支持每个组件的本地化——在 official documentation 中有解释只需在您的组件中定义 i18n 带有消息的对象 - 文档显示了具体的操作方法：

// setup locale info for root Vue instance
const i18n = new VueI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello world',
        greeting: 'good morning'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界',
        greeting: 'おはようございます'
      }
    }
  }
})

// Define component
const Component1 = {
  template: `
    <div class="container">
     <p>Component1 locale messages: {{ $t("message.hello") }}</p>
     <p>Fallback global locale messages: {{ $t("message.greeting") }}</p>
   </div>`,
  i18n: { // `i18n` option, setup locale info for component
    messages: {
      en: { message: { hello: 'hello component1' } },
      ja: { message: { hello: 'こんにちは、component1' } }
    }
  }
}

// template
<div id="app">
  <p>{{ $t("message.hello") }}</p>
  <component1></component1>
</div>

更新

如何使用唯一的本地化字符串初始化组件：

const Component1 = {
  template: `
    <div class="container">
     <p>Component1 locale messages: {{ $t("message.hello") }}</p>
     <p>Fallback global locale messages: {{ $t("message.greeting") }}</p>
   </div>`,
  i18n: { // `i18n` option, setup locale info for component
    messages: uniqueLocalization
  },
  props:
  {
    uniqueLocalization:
    {
      type: Object,
      default: () => ({})
    }
  }
}

<template>
  <div>
    <comp :unique-localization="locale_1"/>
    <comp :unique-localization="locale_2"/>
    <comp :unique-localization="locale_3"/>    
  </div>
</template>

<script>
import component1 from '@/components/component1.vue'

export default
{
  components:
  {
    comp: component1
  },
  data()
  {
    return {
      locale_1:
      {
        en:
        {
          message:
          {
            hello: 'Greetings',
            bye: 'Farewell'
          }
        },
        ru:
        {
          message:
          {
            hello: 'Привет',
            bye: 'До свидания'
          }
        }
      },
      locale_3:
      {
        en:
        {
          message:
          {
            hello: 'Greetings, buddy',
            bye: 'Farewell, dude'
          }
        },
        ru:
        {
          message:
          {
            hello: 'Привет, ребята',
            bye: 'До свидания, мужики'
          }
        }
      },
      locale_3:
      {
        en:
        {
          message:
          {
            hello: 'Godd day, team',
            bye: 'Bye-bye, darling'
          }
        },
        ru:
        {
          message:
          {
            hello: 'Здравствуйте, братушки',
            bye: 'Пока'
          }
        }
      }
    };
  }
}
</script>

如何使用 VueI18n 进行基于组件实例的国际化？

How to use VueI18n for component instance based internationalization?

javascript

vue.js

vue-i18n

更新