Локализация на основе локальной области

Параметры компонента i18n

В разделе 'Область действия и изменение локали', Vue I18n имеет два понятия области действия: глобальная область и локальная область.

В целом, информация о локали (например, locale, messages и т.д.) задается как параметр createI18n и устанавливается (инсталлируется) с помощью app.use. В общем, вы используете функции глобальной области перевода $t для локализации.

Иногда необходимо локализовать каждый компонент отдельно, при этом всё же управляя ресурсами локальных сообщений. В этом случае может быть полезно локализовать каждую локальную область с помощью параметра i18n компонента вместо глобальной области.

Следующий пример показывает локализацию на основе локальной области:

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

// установка информации о локали, используемой глобальной областью, как параметров
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello world',
        greeting: 'good morning, world!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界',
        greeting: 'おはよう、世界！'
      }
    }
  }
})

// определение компонента
const Component1 = {
  template: `
    <div id="component">
      <h1>Component1</h1>
      <p>Component1 locale messages: {{ $t("message.hello") }}</p>
      <p>Fallback global locale messages: {{ $t("message.greeting") }}</p>
    </div>
  `,
  i18n: {
    messages: {
      en: { message: { hello: 'hello component1' } },
      ja: { message: { hello: 'こんにちは、component1' } }
    }
  }
}

const app = createApp({
  components: { Component1 }
})
app.use(i18n)
app.mount('#app')

Шаблон:

<div id="app">
  <h1>Root</h1>
  <p>{{ $t("message.hello") }}</p>
  <Component1 />
</div>

Выдает следующий результат:

<div id="app">
  <h1>Root</h1>
  <p>こんにちは、世界</p>
  <div class="component">
    <p>Component1 locale messages: こんにちは、component1</p>
    <p>Fallback global locale messages: おはよう、世界！</p>
  </div>
</div>

Как показано в примере выше, если у компонента нет локального сообщения, происходит резервное использование глобальной области. Как объяснено здесь, поскольку locale локальной области наследуется от глобальной области, компонент использует язык, установленный в глобальной области (в приведенном выше примере: locale: 'ja')

А также, как объяснено здесь, обратите внимание, что по умолчанию при использовании резервных глобальных значений в консоли выводятся два предупреждения:

[intlify] Не найден ключ 'message.greeting' в локальных сообщениях 'ja'.
[intlify] Резервный перевод 'message.greeting' с корневой локалью.

Если вы хотите локализовать с использованием локали компонента, вы можете сделать это с помощью sync: false и locale в параметрах компонента i18n.

Общие локальные сообщения для компонентов

Иногда может потребоваться импортировать общие локальные сообщения для некоторых компонентов, а не использовать резервные глобальные локальные сообщения (например, общие сообщения определенной функции для компонентов).

Вы можете использовать параметр sharedMessages компонента i18n.

Пример общих локальных сообщений:

export default {
  en: {
    buttons: {
      save: "Save",
      // ...
    }
  },
  ja: {
    buttons: {
      save: "保存",
      // ...
    }
  }
}

Компоненты:

import commonMessage from './locales/common' // импорт общих локальных сообщений

export default {
  name: 'ServiceModal',
  template: `
    <div class="modal">
      <div class="body">
        <p>This is good service</p>
      </div>
      <div class="footer">
        <button type="button">{{ $t('buttons.save') }}</button>
      </div>
    </div>
  `,
  i18n: {
    messages: { ... },
    sharedMessages: commonMessages
  }
}

Если указан параметр sharedMessages вместе с параметром messages, эти сообщения будут объединены в локальные сообщения экземпляра VueI18n целевого компонента.