Функции сообщений

Vue I18n рекомендует использовать строковый формат с списками, именованными и литеральными элементами в качестве локализованных сообщений при переводе сообщений.

Однако иногда синтаксис строкового формата сообщений трудно обработать.

Например, предположим, вы хотите обработать следующие сообщения на французском языке:

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

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

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

Однако существуют ситуации, когда вам действительно необходима полная программная мощь JavaScript из-за сложности языковой грамматики. Поэтому вместо строковых сообщений вы можете использовать Функции сообщений.

ПРИМЕЧАНИЕ

Сообщения, написанные в формате синтаксиса сообщений, компилируются в функции сообщений с помощью компилятора сообщений Vue I18n. Функции сообщений и механизм кэширования обеспечивают максимальное улучшение производительности.

Основное использование

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

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

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

Использование функции сообщения очень просто! Вам нужно только указать ключ функции сообщения с помощью $t или t:

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

Вывод следующий:

<p>hello!</p>

Функция сообщения выводит сообщение возвращаемого значения строки функции сообщения.

ПРИМЕЧАНИЕ

Если вам нужно использовать компонент перевода (i18n-t), вам нужно поддерживать возврат не только строкового значения, но и значения VNode.

Для поддержки использования компонента перевода используется свойство type объекта MessageContext, как показано в следующем примере кода:

import { createVNode, Text } from 'vue'

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

Если вы еще этого не сделали, рекомендуется ознакомиться с Vue render function перед тем, как углубляться в функции сообщений.

Именованная интерполяция

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

Вы можете использовать функцию named контекста сообщения для выполнения той же задачи.

Вот пример приветствия:

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

Шаблон:

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

Вывод следующий:

<p>hello, DIO!</p>

Вам нужно указать ключ, который разрешает значение, указанное с помощью именованного параметра $t или t.

Интерполяция списка

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

Вы можете использовать функцию list контекста сообщения для выполнения той же задачи.

Вот пример приветствия:

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

Шаблон:

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

Вывод следующий:

<p>hello, DIO!</p>

Вам нужно указать индекс, который разрешает значение, указанное с помощью списка $t или t.

Связанные сообщения

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

Вы можете использовать функцию linked контекста сообщения для выполнения той же задачи.

Вот пример функции сообщения:

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

Шаблон:

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

Вывод следующий:

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

Вам нужно указать ключ, который разрешает значение, указанное с помощью $t или t.

Множественное число

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

Вы можете использовать функцию plural контекста сообщения для выполнения той же задачи.

Вот пример функции сообщения:

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

Шаблон:

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

Вывод следующий:

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

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

Вам нужно указать ключ, который разрешает значение, указанное с помощью $t или t.