Область видимости и изменение локали

Область видимости

Vue I18n управляет ресурсами для предоставления функций интернационализации, включая переключение локалей, сообщения для каждого языка, называемые сообщениями локали, и именованный формат для даты и чисел. Все это управляется экземпляром VueI18n.

Приложение Vue строится из компонентов в виде дерева. Чтобы локализовать каждый из компонентов в Vue I18n с использованием функций интернационализации, нам нужно понять концепцию области видимости.

Vue I18n имеет две области видимости:

• глобальная область видимости
• локальная область видимости

Глобальная область видимости

Глобальная область видимости в Vue позволяет вам получать доступ к ресурсам интернационализации (i18n) и управлять ими во всех компонентах приложения. Это особенно полезно для централизованного управления i18n.

Когда вы создаете экземпляр i18n с помощью createI18n, автоматически создается глобальная область видимости. Эта глобальная область видимости связана с экземпляром VueI18n, который может быть доступен через глобальное свойство экземпляра i18n. По сути, глобальная область видимости относится к экземпляру VueI18n, который доступен через глобальное свойство экземпляра i18n.

Если опция i18n не указана в компоненте, глобальная область видимости автоматически активируется для этого компонента. В этом случае экземпляр VueI18n, доступный через this.$i18n внутри компонента, совпадает с глобальным экземпляром, доступным через глобальное свойство экземпляра i18n.

Локальная область видимости

Локальная область видимости в Vue позволяет управлять ресурсами i18n на уровне каждого компонента, подобно тому, как работает <style scoped> в однофайловых компонентах. Когда компонент имеет локальную область видимости, активны только ресурсы i18n этого компонента. Это особенно полезно, когда вы хотите управлять сообщениями локали, специфичными для каждого компонента.

Локальная область видимости включается путем указания опции i18n внутри компонента. При инициализации компонента создается новый экземпляр VueI18n. В результате экземпляр VueI18n, доступный через this.$i18n в этом компоненте, отличается от глобального экземпляра VueI18n, доступного через глобальное свойство экземпляра i18n.

Изменение локали

До сих пор мы объясняли концепцию области видимости, и как только вы понимаете область видимости, легко понять, как изменить локаль.

Глобальная область видимости

Если вы хотите изменить локаль для всего приложения, глобальная область видимости позволяет использовать $i18n.locale для каждого компонента.

Вот пример:

const i18n = createI18n({
  locale: 'ja', // установить текущую локаль
  messages: {
    en: {
      hello: 'hello!'
    },
    ja: {
      hello: 'こんにちは！'
    }
  },
  // параметры vue-i18n здесь ...
  // ...
})

// создать экземпляр приложения Vue, установить Vue I18n и смонтировать!
createApp({
  // параметры vue здесь ...
  // ...
}).use(i18n).mount('#app')

Компонент:

<template>
  <div class="locale-changer">
    <select v-model="$i18n.locale">
      <option
        v-for="locale in $i18n.availableLocales"
        :key="`locale-${locale}`"
        :value="locale"
      >
        {{ locale }}
      </option>
    </select>
  </div>
</template>

В приведенном выше примере используется свойство availableLocales экземпляра VueI18n для перечисления доступных локалей в качестве опций элемента select. Поскольку $i18n.locale привязан с помощью v-model, вы можете изменить локаль, выбрав один из вариантов элемента select, который установит значение $i18n.locale.

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

Локальная область видимости

Локаль локальной области видимости по умолчанию наследуется из глобальной области видимости. Поэтому, когда вы изменяете локаль в глобальной области видимости, локаль в локальной области видимости также изменяется.

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

ПРИМЕЧАНИЕ

Если вы не хотите наследовать локаль из глобальной области видимости, вам нужно установить sync опции компонента i18n в false.

Пример:

const i18n = createI18n({
  locale: 'ja', // установить текущую локаль
  // параметры vue-i18n здесь ...
  // ...
})

// создать экземпляр приложения Vue, установить Vue I18n и смонтировать!
createApp({
  // параметры vue здесь ...
  // ...
}).use(i18n).mount('#app')


// изменить локаль через свойство `global`

// когда vue-i18n используется с legacy: false, обратите внимание, что i18n.global.locale является ref, поэтому мы должны устанавливать его через .value:
i18n.global.locale.value = 'en'

// иначе - при использовании legacy: true, устанавливаем так:
i18n.global.locale = 'en'

ПРЕДУПРЕЖДЕНИЕ

Изменение локали локальной области видимости не влияет на локаль глобальной области видимости. Это означает, что изменение локали в $i18n.locale в компоненте локальной области видимости не изменит всю локаль приложения, а только этот компонент. Используйте $root.$i18n.locale вместо $i18n.locale.