语言区域存储

Langsys 中所有的响应式行为都依赖于一小块状态：一个保存当前语言环境的 store。设置它，整个树中的每条译文都会重新渲染。无需重新加载，也无需切换路由。

观看 · 0:36 语言区域存储

一个 store 驱动一切

你需要向 LangsysApp.init() 传入一个 UserLocaleStore——一个保存语言区域字符串的响应式值。它就是你的框架所说的响应式类型:Langsys signal、Svelte 的 writable 或 Vue 的 ref。向它写入新值后,SDK 会针对新的语言区域重新解析每一个 t()、<Translate> 和 <Phrase>。

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

各框架均可原生读取

不同框架的响应式底层实现各不相同,但模型完全一致——当前语言区域只有唯一的数据源,并通过你已熟悉的惯用方式呈现。

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

切换后就地重新翻译

当存储发生变化时,SDK 会获取新语言环境的目录——只需一次请求,无需刷新页面——并在目录到达后重新翻译所有内容。在此之前,页面会保持当前显示的语言,因此不会回退到源文本。

插值与复数

观看 · 1:14 复数处理

参数用于填充 {placeholders}。带计数的句子在你的代码中保持为单一形式:Langsys 会在翻译过程中生成各语言的复数形式,SDK 则在渲染时按当前语言区域选择匹配的分支。

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"

并排对比的奥秘。所有绑定都委托给同一个共享的 langsys-js-typescript 核心，因此一个存储可以同时驱动 React、Vue 和 Svelte——这正是对比演示能通过同一个切换器让三者保持同步的原因。

立即体验：通过交互式演练场，您可以编辑短语和参数、切换语言区域，并观察真实的 SDK 重新翻译。