0Pricing
Vue Academy · Ders

useI18n Composable'ı ve t() İşlevi

useI18n(), t('key'), şablonlarda $t, locale.value değiştirme ve locale algılama.

useI18n Composable'ı ve t() İşlevi, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

script setup içinde çeviri yapma

Composition API kipinde bileşenler, çeviri araçlarına useI18n() bileştirilebilir işlevi aracılığıyla erişir. Bu işlev, diğerlerinin yanı sıra t işlevini ve tepkisel bir locale başvurusunu döndürür.

useI18n çağrısı yapma

<script setup> içinde useI18n() çağrısı yapın ve ihtiyacınız olanları parçalarına ayırarak alın.

import { useI18n } from "vue-i18n"

const { t, locale } = useI18n()

t işlevi

t(key), etkin yerel ayar için çevrilmiş dizeyi döndürür. Şablonlardaki $t ifadesinin betik tarafındaki eşdeğeridir.

const { t } = useI18n()

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

t ile değer yerleştirme

Yer tutucuları doldurmak için adlandırılmış değerlerden oluşan bir nesneyi, tıpkı şablonlarda olduğu gibi ikinci bağımsız değişken olarak geçin.

const { t } = useI18n()

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

Dinamik dizeler için t kullanma

t sıradan bir işlev olduğundan, onu betik mantığının herhangi bir yerinde kullanabilirsiniz: bildirim iletileri, hesaplanan etiketler veya doğrulama metinleri oluşturabilirsiniz.

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

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

locale başvurusu

locale, geçerli dil kodunu tutan tepkisel bir başvurudur. Onu okumak, etkin dili öğrenmenizi sağlar.

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

Dili genel olarak değiştirme

locale.value değerine atama yapmak, tüm uygulamanın etkin dilini değiştirir. Her t çağrısı ve şablonlardaki her $t, yeni dille tepkisel olarak yeniden oluşturulur.

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

Dil seçici

Basit bir dil seçici, bir seçim kutusunu locale değerine bağlar. Tepkisel olduğu için bir seçenek seçtiğinizde tüm kullanıcı arayüzü anında değişir.

<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 ve t karşılaştırması

İki farklı bağlamda aynı işi yaparlar:

  • $t — şablonlarda içe aktarma gerektirmeden otomatik olarak kullanılabilir.
  • t — useI18n() işlevinden gelir; betikte ve tepkisel mantıkta kullanılır.

Kod içinde dizeler hesaplarken t kullanmayı tercih edin.

Kapsamlı ve genel mesajlar

useI18n(), bileşene yerel mesajları kullanmak için seçenekler alabilir. Seçenek verilmediğinde, uygulama genelindeki çeviriler için yaygın olarak tercih edilen genel örneği kullanır.

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

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

Seçimi kalıcı hâle getirme

Dil bir kullanıcı tercihidir; bu nedenle kalıcı hâle getirin. Başlangıçta kaydedilmiş bir değeri okuyun ve locale değiştiğinde bir izleyiciyle bu değeri yazın.

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

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

Hızlı kontrol

useI18n konusundaki anlayışınızı kontrol edin.

Özet

Çalışma zamanındaki çeviri API'sini öğrendiniz:

  • useI18n(), t işlevini ve tepkisel bir locale başvurusunu döndürür.
  • t(key) çeviri yapar; t(key, { name }) yer tutuculara değer yerleştirir.
  • Betik mantığında ve hesaplanan değerlerde t, şablonlarda $t kullanın.
  • Dili genel ve tepkisel olarak değiştirmek için locale.value değerini ayarlayın.
  • Seçimi locale üzerinde bir watch kullanarak kalıcı hâle getirin.

Sıkça Sorulan Sorular

“useI18n Composable'ı ve t() İşlevi” dersi ücretsiz mi?

Evet — “useI18n Composable'ı ve t() İşlevi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“useI18n Composable'ı ve t() İşlevi” dersinde ne öğreneceğim?

useI18n(), t('key'), şablonlarda $t, locale.value değiştirme ve locale algılama. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“useI18n Composable'ı ve t() İşlevi” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. vue-i18n Kurulumu ve Mesaj Dosyaları
  2. useI18n Composable'ı ve t() İşlevi
  3. Çoğullaştırma ve Bağlantılı Mesajlar
  4. Sayı, Tarih ve Para Birimi Biçimlendirme
← Vue Academy Sayfasına Dön