Vue Academy · Lekcja

Composable useI18n i funkcja t()

useI18n(), t('key'), $t w szablonach, zmiana locale.value oraz wykrywanie lokalizacji.

Lekcja 2 z 413 kroki

Composable useI18n i funkcja t() to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Tłumaczenie w script setup

W trybie Composition API komponenty uzyskują dostęp do narzędzi tłumaczeniowych za pośrednictwem composable useI18n(). Zwraca ono między innymi funkcję t oraz reaktywny ref locale.

Wywoływanie useI18n

Wywołaj useI18n() wewnątrz <script setup> i wyodrębnij potrzebne elementy.

import { useI18n } from "vue-i18n"

const { t, locale } = useI18n()

Funkcja t

t(key) zwraca przetłumaczony ciąg znaków dla aktywnej lokalizacji. Jest odpowiednikiem $t używanym po stronie skryptu.

const { t } = useI18n()

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

Interpolacja za pomocą t

Przekaż obiekt nazwanych wartości jako drugi argument, aby wypełnić symbole zastępcze, dokładnie tak jak w szablonach.

const { t } = useI18n()

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

Używanie t dla dynamicznych ciągów znaków

Ponieważ t jest zwykłą funkcją, można jej używać w dowolnym miejscu logiki skryptu — do budowania komunikatów toast, etykiet obliczanych lub tekstów walidacyjnych.

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

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

Ref locale

locale to reaktywny ref przechowujący bieżący kod języka. Odczytanie jego wartości informuje o aktywnym języku.

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

Globalna zmiana języka

Przypisanie wartości do locale.value zmienia aktywny język w całej aplikacji. Każde wywołanie t oraz każde $t w szablonach zostanie reaktywnie ponownie wyrenderowane w nowym języku.

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

Przełącznik języka

Prosty przełącznik wiąże element select z locale. Dzięki reaktywności wybranie opcji natychmiast zmienia cały interfejs.

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

Obie funkcje robią to samo, ale w dwóch kontekstach:

$t — dostępne automatycznie w szablonach, bez importowania.
t — pochodzi z useI18n() i jest używane w skrypcie oraz logice reaktywnej.

Podczas obliczania ciągów znaków w kodzie preferuj t.

Komunikaty zakresowe a globalne

useI18n() może przyjmować opcje pozwalające używać komunikatów lokalnych dla komponentu. Bez opcji korzysta z globalnej instancji — jest to typowy wybór dla tłumaczeń obejmujących całą aplikację.

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

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

Zapisywanie wybranego języka

Język jest preferencją użytkownika, dlatego należy go zapisywać. Odczytaj zapisaną wartość podczas uruchamiania aplikacji i zapisuj ją za każdym razem, gdy locale się zmieni, korzystając z watchera.

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

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

Szybkie sprawdzenie

Sprawdź swoje rozumienie useI18n.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Poznałeś interfejs API tłumaczeń w czasie działania aplikacji:

useI18n() zwraca t oraz reaktywny ref locale.
t(key) tłumaczy tekst, a t(key, { name }) wstawia wartości w symbole zastępcze.
Używaj t w logice skryptu i wartościach obliczanych, a $t w szablonach.
Ustaw locale.value, aby globalnie i reaktywnie zmienić język.
Zapisuj wybrany język za pomocą watch obserwującego locale.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Composable useI18n i funkcja t()” jest bezpłatna?

Tak — pełny tekst „Composable useI18n i funkcja t()” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Composable useI18n i funkcja t()”?

useI18n(), t('key'), $t w szablonach, zmiana locale.value oraz wykrywanie lokalizacji. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Composable useI18n i funkcja t()”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Konfiguracja vue-i18n i pliki komunikatów
Composable useI18n i funkcja t()
Liczba mnoga i komunikaty powiązane
Formatowanie liczb, dat i walut

← Powrót do Vue Academy