คอมโพสิเบิล useI18n และฟังก์ชัน t()
useI18n(), t('key'), $t ในเทมเพลต การสลับด้วย locale.value และการตรวจหา locale
คอมโพสิเบิล useI18n และฟังก์ชัน t() เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
การแปลใน script setup
ในโหมด API แบบการจัดองค์ประกอบ ส่วนประกอบจะเข้าถึงเครื่องมือแปลภาษาผ่านคอมโพสเซเบิล useI18n() ซึ่งส่งคืนฟังก์ชัน t และรีแอกทีฟรีฟ locale รวมถึงค่าอื่น ๆ
การเรียก useI18n
เรียก useI18n() ภายใน <script setup> แล้วแยกค่าที่ต้องการออกมา
import { useI18n } from "vue-i18n"
const { t, locale } = useI18n()ฟังก์ชัน t
t(key) ส่งคืนสตริงที่แปลแล้วสำหรับ locale ที่ใช้งานอยู่ ฟังก์ชันนี้เทียบเท่ากับ $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
locale เป็นรีแอกทีฟรีฟที่เก็บรหัสภาษาปัจจุบัน การอ่านค่าจะบอกภาษาที่ใช้งานอยู่
const { locale } = useI18n()
console.log(locale.value) // "en"การเปลี่ยนภาษาทั่วทั้ง app
การกำหนดค่าให้ 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() รับตัวเลือกเพื่อใช้ข้อความเฉพาะส่วนประกอบได้ หากไม่ส่งตัวเลือก จะใช้อินสแตนซ์ส่วนกลาง ซึ่งเป็นตัวเลือกทั่วไปสำหรับคำแปลทั่วทั้ง app
const { t } = useI18n() // global messages
// component-scoped (advanced):
// const { t } = useI18n({
// messages: { en: { ok: "OK" }, tr: { ok: "Tamam" } }
// })การบันทึกตัวเลือกไว้
ภาษาเป็นการตั้งค่าที่ผู้ใช้เลือก จึงควรบันทึกไว้ อ่านค่าที่บันทึกไว้เมื่อเริ่มต้น app และเขียนค่าใหม่ทุกครั้งที่ locale เปลี่ยนแปลงด้วยตัวเฝ้าดู
import { watch } from "vue"
const { locale } = useI18n()
watch(locale, (val) => localStorage.setItem("lang", val))ตรวจสอบความเข้าใจ
ตรวจสอบความเข้าใจของคุณเกี่ยวกับ useI18n
สรุปทบทวน
คุณได้เรียนรู้ API สำหรับการแปลขณะทำงาน:
useI18n()ส่งคืนtและรีแอกทีฟรีฟlocalet(key)แปลภาษา ส่วนt(key, { name })ใช้แทนค่าตัวแทนค่า- ใช้
tในตรรกะของสคริปต์และค่าที่คำนวณได้ ใช้$tในแม่แบบ - ตั้งค่า
locale.valueเพื่อเปลี่ยนภาษาทั่วทั้ง app แบบรีแอกทีฟ - บันทึกตัวเลือกไว้ด้วย
watchที่เฝ้าดูlocale
คำถามที่พบบ่อย
บทเรียน “คอมโพสิเบิล useI18n และฟังก์ชัน t()” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “คอมโพสิเบิล useI18n และฟังก์ชัน t()” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “คอมโพสิเบิล useI18n และฟังก์ชัน t()”
useI18n(), t('key'), $t ในเทมเพลต การสลับด้วย locale.value และการตรวจหา locale คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “คอมโพสิเบิล useI18n และฟังก์ชัน t()” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า vue-i18n และไฟล์ข้อความ
- คอมโพสิเบิล useI18n และฟังก์ชัน t()
- การผันรูปพหูพจน์และข้อความที่เชื่อมโยง
- การจัดรูปแบบตัวเลข วันที่ และสกุลเงิน