← Khái niệm

Locale store

Mọi thứ phản ứng theo thời gian thực trong Langsys đều xoay quanh một phần trạng thái nhỏ: một store lưu ngôn ngữ hiện tại. Chỉ cần đặt giá trị, mọi bản dịch trong cây giao diện sẽ được render lại. Không cần tải lại trang, không cần đổi route.

Một store điều khiển tất cả

Bạn truyền cho LangsysApp.init() một UserLocaleStore — một giá trị phản ứng (reactive) chứa chuỗi ngôn ngữ. Đó là bất cứ thứ gì framework của bạn gọi là reactive: một signal của Langsys, một writable của Svelte hoặc một ref của Vue. Hãy ghi giá trị vào đó và SDK sẽ phân giải lại mọi t(), <Translate> và <Phrase> theo ngôn ngữ mới.

import { LangsysApp, createLocaleStore } from 'langsys-js-react';

const locale = createLocaleStore('en-US');   // one reactive store

await LangsysApp.init({
  projectid,
  key,                    // read-only in the browser
  UserLocaleStore: locale,
});

// Later — anywhere in the app:
locale.set('es-ES');      // every t(), <Translate>, <Phrase> re-renders

Mỗi framework đều đọc được nguyên bản

Cơ chế phản ứng khác nhau theo từng framework, nhưng mô hình thì giống hệt nhau — một nguồn dữ liệu duy nhất cho ngôn ngữ đang dùng, được thể hiện qua những cách viết quen thuộc mà bạn đã dùng.

// React    — a hook returns the current t, re-rendering on change
const t = useT();

// Vue      — a composable ref, auto-unwrapped in templates
const t = useT();

// Svelte   — a store, auto-subscribed with $
$t('Hello, {name}!', 'Greetings', { name });

Chuyển đổi sẽ dịch lại ngay tại chỗ

Khi store thay đổi, SDK sẽ tải danh mục của locale mới — chỉ một yêu cầu, không cần tải lại trang — và dịch lại toàn bộ khi danh mục về tới. Cho đến lúc đó, trang vẫn giữ ngôn ngữ đang hiển thị, nên sẽ không có gì bị quay về văn bản gốc.

Nội suy & số nhiều

Params điền vào các {placeholders}. Các câu có số đếm vẫn giữ dạng phẳng trong mã của bạn: Langsys tạo các dạng số nhiều của từng ngôn ngữ trong quá trình dịch, và SDK hiển thị nhánh phù hợp — tại thời điểm render, theo ngôn ngữ đang dùng.

t('You have {count} items', 'Cart', { count });

// You write that one flat sentence. Langsys generates each locale's plural
// forms during translation, and the SDK renders the branch your count matches:
// en → "1 item" / "3 items"   ·   es → "1 artículo" / "3 artículos"

Dùng thử trực tiếp: sân chơi tương tác cho phép bạn chỉnh sửa cụm từ và tham số, đổi ngôn ngữ, và xem SDK thật dịch lại ngay.