`useTranslate` composable

Không phải tất cả mọi thứ đều phù hợp với một thành phần. Các thuộc tính như placeholder hoặc title lấy một chuỗi và đôi khi bạn cần một bản dịch trong tập lệnh của mình. Đối với những điều này, hãy sử dụng phương thức useTranslate composable hoặc translate.

`useTranslate` composable

useTranslate trả về một hàm, thường được gọi là t, dịch một chuỗi:

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

const t = useTranslate();
</script>

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

t trả về văn bản gốc trong khi bản dịch tải. Khi nó đã sẵn sàng, thành phần sẽ hiển thị lại. Giống như thành phần <T>, nó chấp nhận các tùy chọn ngôn ngữ và hình thức:

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

Nó cũng chấp nhận id, để tự chỉnh sửa cách sử dụng văn bản này:

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

Biến

Chuyển các giá trị không nên được dịch trong v và tham chiếu chúng là $name, giống như với thành phần <T>:

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

Văn bản được dịch một lần là Search {0} products và bản dịch được lưu trong bộ nhớ đệm được sử dụng lại khi count thay đổi.

useT là cùng composable với useTranslate.

Dịch bằng mã

Để dịch một chuỗi trong tập lệnh của bạn, hãy gọi translate. Nó trả lại một lời hứa.

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'
});

Nếu không có tùy chọn lang, văn bản được dịch sang ngôn ngữ hiện tại.

translate cũng lấy các biến:

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

Các thành phần bên ngoài, ví dụ trong một cửa hàng, sử dụng trực tiếp đối tượng được trả về bởi createMagicTranslate. Nó cung cấp các phương thức translate và setLanguage giống nhau và thuộc tính language.

useTranslate composable