`useTranslate` composable

Nie wszystko pasuje do komponentu. Atrybuty takie jak placeholder lub title przyjmują ciąg znaków, a czasami potrzebujesz tłumaczenia w skrypcie. W tym celu użyj metody useTranslate composable lub translate.

`useTranslate` composable

useTranslate zwraca funkcję, zwykle nazywaną t, która tłumaczy ciąg znaków:

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

const t = useTranslate();
</script>

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

t zwraca oryginalny tekst podczas ładowania tłumaczenia. Gdy jest gotowy, komponent jest ponownie renderowany. Podobnie jak komponent <T>, akceptuje opcje językowe i formalności:

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

Akceptuje również id, aby samodzielnie edytować to użycie tekstu:

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

Zmienne

Przekaż wartości, które nie powinny być tłumaczone w v i odwołuj je jako $name, tak samo jak w przypadku składnika <T>:

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

Tekst jest tłumaczony raz jako Search {0} products, a tłumaczenie zapisane w pamięci podręcznej jest ponownie używane, gdy zmieni się count.

useT jest tym samym composable co useTranslate.

Tłumaczenie w kodzie

Aby przetłumaczyć ciąg znaków w skrypcie, zadzwoń translate. Zwraca obietnicę.

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

Bez opcji lang tekst jest tłumaczony na bieżący język.

translate przyjmuje również zmienne:

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

Zewnętrzne komponenty, na przykład w sklepie, używają obiektu zwróconego przez createMagicTranslate bezpośrednio. Zapewnia te same metody translate i setLanguage oraz właściwości language.

useTranslate composable