`useTranslate` composable

并非所有东西都适合一个组件。诸如 placeholder 或 title 之类的属性采用字符串，有时您需要在脚本中进行翻译。对于这些，使用 useTranslate composable 或 translate 方法。

`useTranslate` composable

useTranslate 返回一个通常名为 t 的函数，用于翻译字符串：

<script setup lang="ts">
import { useTranslate } from '@magic-translate/vue';

const t = useTranslate();
</script>

<template>
  <input :placeholder="t('Search products')" />
</template>

t 在翻译加载时返回原始文本。一旦准备就绪，组件就会重新渲染。像 <T> 组件一样，它接受语言和形式选项：

<input :placeholder="t('Your name', { lang: 'fr', formality: 'formal' })" />

它还接受 id 来自行编辑文本的这种用法：

<button :title="t('Save', { id: 'checkout-save' })" />

变量

在 v 中传递不应转换的值，并将其引用为 $name，与 <T> 组件相同：

<input :placeholder="t('Search $count products', { v: { count } })" />

文本一次被翻译为 Search {0} products，当 count 更改时，缓存的翻译将被重复使用。

useT 与 useTranslate 相同 composable。

在代码中翻译

要翻译脚本中的字符串，请调用 translate。它返回了一个承诺。

import { useMagicTranslate } from '@magic-translate/vue';

const magicTranslate = useMagicTranslate();
const message = await magicTranslate.translate('Your order has been placed');

// with options
const formal = await magicTranslate.translate('How are you?', {
  lang: 'fr',
  formality: 'formal'
});

如果没有 lang 选项，文本将被翻译成当前语言。

translate 也接受变量：

const message = await magicTranslate.translate('Your order $id has shipped', {
  v: { id: order.id }
});

外部组件，例如在商店中，直接使用 createMagicTranslate 返回的对象。它提供相同的 translate 和 setLanguage 方法和 language 属性。

useTranslate composable