0Pricing
Vue Academy · Урок

Композируемый модуль useI18n и функция t()

useI18n(), t('key'), $t в шаблонах, переключение через locale.value и определение локали

«Композируемый модуль useI18n и функция t()» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Перевод в блоке настройки скрипта

В режиме API композиции компоненты получают доступ к средствам перевода через композабл useI18n(). Среди прочего он возвращает функцию t и реактивную ссылку locale.

Вызов useI18n

Вызовите useI18n() внутри <script setup> и деструктурируйте необходимые значения.

import { useI18n } from "vue-i18n"

const { t, locale } = useI18n()

Функция t

t(key) возвращает переведённую строку для активной локали. В скрипте она выполняет ту же роль, что и $t в шаблонах.

const { t } = useI18n()

const title = t("greeting") // "Hello" when locale is en

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

Передайте объект именованных значений вторым аргументом, чтобы подставить заполнители, точно как в шаблонах.

const { t } = useI18n()

const msg = t("welcome", { name: "Alice" })
// message "Welcome, {name}!" => "Welcome, Alice!"

Использование t для динамических строк

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

import { computed } from "vue"
const { t } = useI18n()

const label = computed(() => t("nav.home"))

Реактивная ссылка локали

locale — реактивная ссылка, содержащая текущий код языка. Чтение её значения сообщает, какой язык активен.

const { locale } = useI18n()
console.log(locale.value) // "en"

Глобальное переключение языка

Присваивание значения locale.value изменяет активный язык во всём app. Каждый вызов t и $t в шаблонах реактивно перерисовывается на новом языке.

function switchToTurkish() {
  locale.value = "tr"
}
// All translated text updates automatically.

Переключатель языка

Простой переключатель связывает список выбора с locale. Благодаря реактивности выбор варианта мгновенно переключает весь интерфейс.

<template>
  <select v-model="locale">
    <option value="en">English</option>
    <option value="tr">Turkce</option>
  </select>
</template>

<script setup>
import { useI18n } from "vue-i18n"
const { locale } = useI18n()
</script>

$t и t

В двух контекстах они выполняют одну и ту же задачу:

  • $t — доступен в шаблонах автоматически, импортировать его не нужно.
  • t — возвращается из useI18n() и используется в скрипте и реактивной логике.

Предпочитайте t при вычислении строк в коде.

Локальные и глобальные сообщения

useI18n() может принимать параметры для использования сообщений, локальных для компонента. Без параметров он использует глобальный экземпляр — это распространённый выбор для переводов всего приложения.

const { t } = useI18n() // global messages

// component-scoped (advanced):
// const { t } = useI18n({
//   messages: { en: { ok: "OK" }, tr: { ok: "Tamam" } }
// })

Сохранение выбора

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

import { watch } from "vue"
const { locale } = useI18n()

watch(locale, (val) => localStorage.setItem("lang", val))

Быстрая проверка

Проверьте, насколько хорошо вы поняли useI18n.

Повторение

Вы изучили API перевода во время выполнения:

  • useI18n() возвращает t и реактивную ссылку locale.
  • t(key) переводит текст; t(key, { name }) подставляет значения в заполнители.
  • Используйте t в логике скрипта и вычисляемых значениях, а $t — в шаблонах.
  • Задавайте locale.value, чтобы глобально и реактивно переключать язык.
  • Сохраняйте выбор с помощью watch для locale.

Часто задаваемые вопросы

Урок «Композируемый модуль useI18n и функция t()» бесплатный?

Да — полный текст урока «Композируемый модуль useI18n и функция t()» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Композируемый модуль useI18n и функция t()»?

useI18n(), t('key'), $t в шаблонах, переключение через locale.value и определение локали Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Композируемый модуль useI18n и функция t()»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Настройка vue-i18n и файлов сообщений
  2. Композируемый модуль useI18n и функция t()
  3. Множественное число и связанные сообщения
  4. Форматирование чисел, дат и валют
← Назад к Vue Academy