Vue Academy · 课时

useI18n 组合式函数与 t() 函数

Q: 「useI18n 组合式函数与 t() 函数」这节课中我会学到什么？

useI18n()、t('key')、模板中的 $t、切换 locale.value，以及区域设置检测 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

useI18n()、t('key')、模板中的 $t、切换 locale.value，以及区域设置检测

useI18n 组合式函数与 t() 函数 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

在 script setup 中进行翻译

在组合式 API 模式下，组件通过useI18n()组合式函数访问翻译工具。它会返回t函数和响应式的locale引用等内容。

调用 useI18n

在<script setup>内部调用useI18n()，并解构出您需要的内容。

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是普通函数，因此您可以在脚本逻辑的任何位置使用它，例如构建提示消息、计算属性中的 label 或验证文本。

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赋值会更改整个 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" } }
// })

持久化语言选择

语言属于用户偏好，因此应将其持久化。在启动时读取已保存的值，并通过观察器在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即可全局且以响应式方式切换语言。
通过监听locale的watch来持久化语言选择。

常见问题解答

「useI18n 组合式函数与 t() 函数」课时是免费的吗？

是的 — 「useI18n 组合式函数与 t() 函数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「useI18n 组合式函数与 t() 函数」这节课中我会学到什么？

useI18n()、t('key')、模板中的 $t、切换 locale.value，以及区域设置检测你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「useI18n 组合式函数与 t() 函数」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy