Vue Academy · درس

‏useI18n Composable ودالة t()

‏useI18n() وt('key') و$t في القوالب، وتبديل locale.value، واكتشاف اللغة

الدرس 2 من 413 خطوة

‏useI18n Composable ودالة t() درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

الترجمة في script setup

في وضع Composition API، تصل المكوّنات إلى أدوات الترجمة عبر composable useI18n(). ويُرجع هذا composable الدالة t ومرجع locale تفاعليًا، من بين قيم أخرى.

استدعاء useI18n

استدعوا useI18n() داخل <script setup> واستخرجوا القيم التي تحتاجون إليها.

import { useI18n } from "vue-i18n"

const { t, locale } = useI18n()

الدالة t

تُرجع t(key) النص المترجم للغة المحلية النشطة. وهي النظير في جانب script للدالة $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 دالة عادية، يمكنكم استخدامها في أي موضع ضمن منطق script — لبناء رسائل toast أو تسميات محسوبة أو نصوص التحقق.

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

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

مرجع locale

يمثّل locale مرجعًا تفاعليًا يحتفظ برمز اللغة الحالية. وتخبركم قراءته باللغة النشطة.

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

تبديل اللغة على مستوى التطبيق

يؤدي الإسناد إلى locale.value إلى تغيير اللغة النشطة للتطبيق بأكمله. ويُعاد تصيير كل استدعاء لـ t وكل $t في القوالب تفاعليًا باللغة الجديدة.

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

مبدّل اللغة

يربط المبدّل البسيط عنصر select بالـ 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()، ويُستخدم في script والمنطق التفاعلي.

فضّلوا t عند حساب النصوص في الكود.

الرسائل المحلية في مقابل العامة

يمكن أن يتلقى useI18n() خيارات لاستخدام رسائل محلية بالمكوّن. وعند عدم تمرير خيارات، يستخدم المثيل العام — وهو الخيار الشائع للترجمات على مستوى التطبيق.

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

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

حفظ الاختيار

اللغة تفضيل للمستخدم، لذا احفظوها. اقرأوا القيمة المحفوظة عند بدء التشغيل، واكتبوها كلما تغيّرت قيمة locale باستخدام watcher.

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

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

تحقق سريع

تحققوا من فهمكم لـ useI18n.

أجب عليها في الدرس التفاعلي

مراجعة

تعلّمتم واجهة برمجة تطبيقات الترجمة أثناء التشغيل:

يُرجع useI18n() كلًا من t ومرجع locale تفاعليًا.
تترجم t(key) النص؛ ويُجري t(key, { name }) استيفاءً للعناصر النائبة.
استخدموا t في منطق script والقيم المحسوبة، واستخدموا $t في القوالب.
عيّنوا locale.value لتبديل اللغة على مستوى التطبيق بأكمله وبصورة تفاعلية.
احفظوا الاختيار باستخدام watch على locale.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «‏useI18n Composable ودالة t()» مجاني؟

نعم — نص درس «‏useI18n Composable ودالة t()» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏useI18n Composable ودالة t()»؟

‏useI18n() وt('key') و$t في القوالب، وتبديل locale.value، واكتشاف اللغة تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «‏useI18n Composable ودالة t()»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy