# vue: 翻译字符串
URL: https://generaltranslation.com/zh/docs/vue/guides/translating-strings.mdx
---

title: 翻译字符串
description: 如何使用 useGT 和 useMessages 翻译 Vue 标签、属性和共享字符串。
related:
  links:
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/developing-spa-translations
    - /docs/vue/guides/formatting-variables
    - /docs/vue/guides/configuring

---

对于无法作为模板内容表达的字符串，例如占位符、无障碍标签和传递给其他组件的值，请使用 [`useGT()`](/docs/vue/reference/composables/use-gt)。如果静态消息在一个模块中声明、在另一个模块中渲染，请结合使用 [`msg()`](/docs/vue/reference/functions/msg) 和 [`useMessages()`](/docs/vue/reference/composables/use-messages)。

## 使用 `useGT` 进行翻译 [#use-gt]

在组件设置期间调用 [`useGT()`](/docs/vue/reference/composables/use-gt)，然后在模板中调用其返回的函数：

```vue
<script setup lang="ts">
import { useGT } from 'gt-vue';

const gt = useGT();
</script>

<template>
  <input
    type="search"
    :placeholder="gt('Search products')"
    :aria-label="gt('Search')"
  />
</template>
```

使用字符串字面量，以便 CLI 能够提取。找不到目录条目时，将返回源字符串。

唯一支持的选项是静态 `$context`：

```vue
<button>{{ gt('Archive', { $context: 'verb on a project action' }) }}</button>
```

花括号会被视为普通文本。[`useGT()`](/docs/vue/reference/composables/use-gt) 不处理 ICU 语法、不对变量进行插值，也不接受 React 字符串选项，如 `$id`、`$maxChars` 和 `$format`。

## 保持翻译结果的响应性 [#reactivity]

[`useGT()`](/docs/vue/reference/composables/use-gt) 返回的函数会在调用时读取当前活动的目录。当需要在区域设置或目录变更后自动更新结果时，请在模板、计算属性或响应式副作用中调用它：

```vue
<script setup lang="ts">
import { computed } from 'vue';
import { useGT } from 'gt-vue';

const gt = useGT();
const pageTitle = computed(() => gt('Account settings'));
</script>

<template>
  <h1>{{ pageTitle }}</h1>
</template>
```

`const pageTitle = gt('Account settings')` 会在设置期间翻译一次并存储翻译快照。当 [`createGT()`](/docs/vue/reference/functions/create-gt) 插件切换区域设置时，它不会再次执行。

## 注册共享消息 [#messages]

使用 [`msg()`](/docs/vue/reference/functions/msg) 在共享模块中注册静态字符串。它会将内容标记为待提取，但不会执行翻译查找。

```ts title="src/messages.ts"
import { msg } from 'gt-vue';

export const statusMessages = {
  active: msg('Active', { $context: 'account status' }),
  paused: msg('Paused', { $context: 'account status' }),
};
```

在渲染所选消息的位置，使用 [`useMessages()`](/docs/vue/reference/composables/use-messages) 解析该消息：

```vue title="src/components/StatusBadge.vue"
<script setup lang="ts">
import { computed } from 'vue';
import { useMessages } from 'gt-vue';
import { statusMessages } from '../messages';

const props = defineProps<{ status: keyof typeof statusMessages }>();
const m = useMessages();
const label = computed(() => m(statusMessages[props.status]));
</script>

<template>
  <span>{{ label }}</span>
</template>
```

不传入选项时，[`msg()`](/docs/vue/reference/functions/msg) 会原样返回原始字符串。传入 `$context` 时，它会添加供 [`useMessages()`](/docs/vue/reference/composables/use-messages) 读取的不透明查找元数据。请勿解析这种编码表示形式，也不要假定其存储方式。

## 使用运行时值翻译内容 [#variables]

普通字符串查找不会插值运行时数据。请将完整短语放在 [`<T>`](/docs/vue/reference/components/t) 中，并用 [`<Var>`](/docs/vue/reference/components/var) 标记变化的值：

```vue
<T>Welcome back, <Var>{{ accountName }}</Var>!</T>
```

当值还需要进行符合区域设置的格式化时，请使用 [`<Num>`](/docs/vue/reference/components/num)、[`<Currency>`](/docs/vue/reference/components/currency) 和 [`<DateTime>`](/docs/vue/reference/components/datetime)。

仅在浏览器中运行且需要在模块求值期间进行静态查找的 SPA，可在等待 [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) 完成后使用 [`t()`](/docs/vue/reference/functions/t)。请遵循[使用 SPA 翻译进行开发](/docs/vue/guides/developing-spa-translations)，以保持所需的导入顺序。
## Next steps

- /docs/vue/guides/translating-content
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/formatting-variables
- /docs/vue/guides/configuring