Pinia 实现多语言动态加载的核心是将语言包作为响应式 state 管理，通过异步 action 加载替换 langPack、getter 提供安全翻译函数 t，并配合路由/用户操作自动切换 locale，实现热更新与按需加载。
Pinia 处理多语言文本包动态加载的全局状态，核心在于把语言资源作为可变 state 管理，配合异步 action 加载、getter 派生翻译函数，并通过集中更新机制确保所有组件响应最新语言内容。它不是简单存个 locale 字符串，而是让“语言包本身”成为响应式数据源。
语言包作为 state 一部分，而非静态配置
不要把 i18n 对象写死在外部文件里直接 import 使用。应该在 store 中声明一个 langPack 字段，类型为 Record<string string></string> 或更精确的嵌套结构（如 Record<string record string>></string>），初始值为空对象或默认语言基础包：
- state 定义示例：
langPack: {} as Record<string string></string> - 同时保存当前 locale：
locale: 'zh-CN' - 避免用
const i18n = createI18n(...)全局实例接管，否则 Pinia 就退化为只存 locale 的壳，失去对语言包变更的响应能力
用异步 action 动态加载并替换语言包
提供一个 loadLocale action，接收 locale code（如 'en-US'），按需导入对应 JSON 文件，加载成功后整体替换 langPack：
- 利用 Vite 的
import.meta.glob预置语言包路径，或用import(`./locales/${locale}.json`)动态导入 - action 内部做 loading 状态控制（可选）和错误兜底，比如加载失败时回退到默认语言
- 关键点：直接赋值
this.langPack = loadedPack，触发响应式更新，所有使用该 store 的组件立刻重渲染
通过 getter 提供安全的翻译函数
不建议在组件中反复调用 store.langPack[key] —— 既冗长又无容错。推荐在 store 中定义一个 t getter：
- 例如：
t: (key: string) => this.langPack[key] ?? key - 可进一步增强：支持嵌套键（
'form.submit.label'）、参数插值（结合简单模板函数）、缺失提示（开发环境 warn） - 组件中直接用
{{ $store.t('header.title') }}，语义清晰，且完全响应 langPack 变更
配合路由守卫或用户操作自动触发切换
语言切换不该只靠按钮 click。常见联动场景包括：
- 用户在设置页选择语言 → 调用
store.loadLocale(newLocale) - 路由变化时检查 path 前缀（如
/en/about）→ 自动触发加载 - 首次进入应用时，读取浏览器
navigator.language或 localStorage 缓存 locale → 初始化加载 - 注意：切换 locale 后，无需手动刷新页面，Pinia 更新会驱动整个 i18n 体系实时响应
这套做法让多语言真正成为“可管理的状态”，而不是配置常量。它天然支持热切换、按需加载、错误恢复，也便于做语言包校验、埋点统计或灰度发布。
