Portée et Changement de Locale

Portée

Vue I18n gère les ressources pour offrir des fonctionnalités d'internationalisation, y compris le changement de locale, les messages de chaque langue appelés messages de locale, et le format nommé pour les dates et les nombres. Ils sont gérés avec l'instance VueI18n.

L'application Vue est construite à partir de certains composants sur une structure arborescente. Pour localiser chacun des composants dans Vue I18n en utilisant les fonctionnalités d'internationalisation, nous devons comprendre le concept de portée.

Vue I18n possède deux portées ci-dessous :

• portée globale
• portée locale

Portée Globale

La portée globale dans Vue vous permet d'accéder et de gérer les ressources d'internationalisation (i18n) dans tous les composants de votre application. Cela est particulièrement utile pour centraliser la gestion de l'internationalisation.

Lorsque vous créez une instance i18n en utilisant createI18n, une portée globale est automatiquement créée. Cette portée globale est liée à l'instance VueI18n, qui peut être accédée via la propriété globale de l'instance i18n. Essentiellement, la portée globale fait référence à l'instance VueI18n accessible via la propriété globale de l'instance i18n.

Si l'option i18n n'est pas spécifiée dans un composant, la portée globale est automatiquement activée pour ce composant. Dans ce cas, l'instance VueI18n accessible via this.$i18n au sein du composant est identique à l'instance globale disponible via la propriété globale de l'instance i18n.

Portée Locale

La portée locale dans Vue vous permet de gérer les ressources i18n au niveau de chaque composant, de manière similaire à la façon dont <style scoped> fonctionne dans les composants monofichiers. Lorsqu'un composant a une portée locale, seules les ressources i18n de ce composant sont actives. Cela est particulièrement utile lorsque vous souhaitez gérer les messages de locale spécifiques à chaque composant.

La portée locale est activée en spécifiant l'option i18n dans le composant. Cela crée une nouvelle instance VueI18n lors de l'initialisation du composant. En conséquence, l'instance VueI18n accessible via this.$i18n dans ce composant est différente de l'instance VueI18n globale disponible via la propriété globale de l'instance i18n.

Changement de Locale

Jusqu'à présent, nous avons expliqué le concept de portée, et une fois que vous comprenez la portée, il est facile de comprendre comment changer la locale.

Portée Globale

Si vous voulez changer la locale pour toute l'application, la portée globale vous permet d'utiliser $i18n.locale pour chaque composant.

Voici un exemple :

const i18n = createI18n({
  locale: 'ja', // définir la locale actuelle
  messages: {
    en: {
      hello: 'hello!'
    },
    zh: {
      hello: '你好！'
    }
  },
  // options de vue-i18n ici ...
  // ...
})

// créer l'instance d'application Vue, installer Vue I18n, et monter !
createApp({
  // options de vue ici ...
  // ...
}).use(i18n).mount('#app')

Composant :

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

L'exemple ci-dessus utilise la propriété availableLocales de l'instance VueI18n pour lister les locales disponibles comme options pour l'élément select. Puisque $i18n.locale est lié avec v-model, vous pouvez le basculer en sélectionnant l'option de l'élément select, ce qui définit sa valeur à $i18n.locale.

Comme vous pouvez le voir, la portée globale est très utile car elle vous permet de changer les messages affichés dans l'interface utilisateur pour tous les composants de l'application en même temps.

Portée Locale

La locale de la portée locale hérite par défaut de la portée globale. Par conséquent, lorsque vous changez la locale dans la portée globale, la locale dans la portée locale est également modifiée.

Si vous voulez basculer la locale pour toute l'application, vous devez la modifier via la propriété global de l'instance i18n créée avec createI18n.

NOTE

Si vous ne voulez pas hériter de la locale de la portée globale, vous devez définir sync de l'option de composant i18n à false.

Exemple :

const i18n = createI18n({
  locale: 'ja', // définir la locale actuelle
  // options de vue-i18n ici ...
  // ...
})

// créer l'instance d'application Vue, installer Vue I18n, et monter !
createApp({
  // options de vue ici ...
  // ...
}).use(i18n).mount('#app')


// changer la locale via la propriété `global`

// quand vue-i18n est utilisé avec legacy: false, notez que i18n.global.locale est une ref, donc nous devons la définir via .value :
i18n.global.locale.value = 'en'

// sinon - en utilisant legacy: true, nous la définissons comme ceci :
i18n.global.locale = 'en'

NOTICE

Modifier la locale de la portée locale n'affecte pas la locale de la portée globale. Cela signifie que modifier la locale dans $i18n.locale dans le composant de portée locale ne changera pas la locale de toute l'application, seulement ce composant. Utilisez $root.$i18n.locale au lieu de $i18n.locale.