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

Question

我正在开发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支持每个组件的本地化--在正式文件中解释了--只在组件中定义带有消息的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>