Fonctions de Messages

Vue I18n recommande d’utiliser les formats liste, nommé et littéral comme messages locaux lors de la traduction des messages.

Cependant, parfois la syntaxe du format de message basé sur les chaînes de caractères est difficile à résoudre.

Par exemple, supposons que vous souhaitiez gérer le message suivant en français :

• Manger de la soupe
• Manger une pomme
• Manger du pain
• Manger de l'orge

Comme vous pouvez le voir, l’article précédent le nom varie selon le genre et la phonétique.

Les fonctionnalités prises en charge par la syntaxe de format de message de Vue I18n peuvent ne pas être capables de prendre en charge ces cas d'usage spécifiques à la langue.

Cependant, dans certaines situations, vous avez vraiment besoin de la puissance programmable complète de JavaScript, en raison de la complexité de la syntaxe linguistique. Donc au lieu des messages basés sur les chaînes de caractères, vous pouvez utiliser les Fonctions de message.

NOTE

Les messages écrits dans la syntaxe de format de message sont compilés en fonctions de message avec le compilateur de message Vue I18n. Les fonctions de message et le mécanisme de mise en cache permettent d'optimiser les performances.

Utilisation de base

Ce qui suit est une fonction de message qui retourne un simple message de salutation :

const messages = {
  en: {
    greeting: (ctx) => 'hello!'
  }
}

La fonction de message accepte le Contexte de message comme premier argument, qui dispose de plusieurs propriétés et fonctions. Nous expliquerons comment l'utiliser dans les sections suivantes, continuons donc.

L'utilisation de la fonction de message est très simple ! Vous spécifiez simplement la clé de la fonction de message avec $t ou t :

<p>{{ $t('greeting') }}</p>

Le résultat est le suivant :

<p>hello!</p>

La fonction de message retourne le message correspondant à la valeur de type chaîne de caractères retournée par la fonction de message.

NOTE

Si vous devez utiliser le composant de traduction (i18n-t), vous devez prendre en charge le retour non seulement de la valeur de type chaîne de caractères, mais aussi de la valeur VNode.

Pour prendre en charge l'utilisation du composant de traduction, la propriété type de MessageContext est utilisée comme indiqué dans l'exemple de code suivant :

import { createVNode, Text } from 'vue'

const messages = {
  en: {
    greeting: ({ type }) => type === 'vnode'
      ? createVNode(Text, null, 'hello', 0)
      : 'hello'
  }
}

Si ce n'est pas déjà fait, il est recommandé de lire les fonctions de rendu de Vue avant de plonger dans les fonctions de message.

Interpolation nommée

Vue I18n prend en charge l'interpolation nommée comme format de message basé sur les chaînes de caractères. Vue I18n interpole les valeurs de paramètre avec $t ou t, et peut les afficher.

Vous pouvez utiliser la fonction named du contexte de message pour faire la même chose.

Voici l'exemple de salutation :

const messages = {
  en: {
    greeting: ({ named }) => `hello, ${named('name')}!`
  }
}

Template :

<p>{{ $t('greeting', { name: 'DIO' }) }}</p>

Le résultat est le suivant :

<p>hello, DIO!</p>

Vous devez spécifier la clé qui résout la valeur spécifiée avec le nom de $t ou t.

Interpolation en liste

Vue I18n prend en charge l'interpolation en liste comme format de message basé sur les chaînes de caractères. Vue I18n interpole les valeurs de paramètre avec $t ou t, et peut les afficher.

Vous pouvez utiliser la fonction list du contexte de message pour faire la même chose.

Voici l'exemple de salutation :

const messages = {
  en: {
    greeting: ({ list }) => `hello, ${list(0)}!`
  }
}

Template :

<p>{{ $t('greeting', ['DIO']) }}</p>

Le résultat est le suivant :

<p>hello, DIO!</p>

Vous devez spécifier l'index qui résout la valeur spécifiée avec la liste de $t ou t.

Messages liés

Vue I18n prend en charge les messages liés comme format de message basé sur les chaînes de caractères. Vue I18n interpole les valeurs de paramètre avec $t ou t, et peut les afficher.

Vous pouvez utiliser la fonction linked du contexte de message pour faire la même chose.

Voici l'exemple de fonction de message :

const messages = {
  en: {
    the_world: 'the world',
    dio: 'DIO:',
    linked: ({ linked }) => `${linked('message.dio')} ${linked('message.the_world')} !!!!`
  }
}

Template :

<p>{{ $t('linked') }}</p>

Le résultat est le suivant :

<p>DIO: the world !!!!</p>

Vous devez spécifier la clé qui résout la valeur spécifiée avec $t ou t.

Pluralisation

Vue I18n prend en charge la pluralisation comme format de message basé sur les chaînes de caractères. Vue I18n interpole les valeurs de paramètre avec $t ou t, et peut les afficher.

Vous pouvez utiliser la fonction plural du contexte de message pour faire la même chose.

Voici l'exemple de fonction de message :

const messages = {
  en: {
    car: ({ plural }) => plural(['car', 'cars']),
    apple: ({ plural, named }) =>
      plural([
        'no apples',
        'one apple',
        `${named('count')} apples`
      ])
  }
}

Template :

<p>{{ $t('car', 1) }}</p>
<p>{{ $t('car', 2) }}</p>

<p>{{ $t('apple', 0) }}</p>
<p>{{ $t('apple', 1) }}</p>
<p>{{ $t('apple', { count: 10 }, 10) }}</p>

Le résultat est le suivant :

<p>car</p>
<p>cars</p>

<p>no apples</p>
<p>one apple</p>
<p>10 apples</p>

Vous devez spécifier la clé qui résout la valeur spécifiée avec $t ou t.