i18n 国际化

与 @nuxtjs/i18n 配合使用，实现字典数据随语言切换自动更新。

本章目标：将 nuxt-dict 与 @nuxtjs/i18n 配合使用，让字典数据随用户切换语言自动同步。

什么时候需要看这章？

项目中已使用 @nuxtjs/i18n 做多语言路由和 UI 翻译
希望用户切换语言时，下拉框（性别、状态等）的选项也自动换成对应语言
页面不刷新也能自动更新字典数据

被动同步（开箱即用）

nuxt-dict 的默认 cookie 名称是 i18n_redirected——这与 @nuxtjs/i18n 的默认 cookie 完全相同。只要保持 locale.source: 'cookie'（默认值），两个模块自动共享同一份语言信息。

这意味着什么？

用户首次访问 /en/about 时：

@nuxtjs/i18n 从 URL 解析出语言 en-US，写入 cookie i18n_redirected
nuxt-dict 从同一 cookie 读取语言，请求字典时传 lang=en-US
字典 API 返回英文数据

用户刷新页面或导航到新页面时：

cookie 中已有 en-US
nuxt-dict 直接用这个语言请求字典——不需要额外配置

主动同步（运行时切换语言不刷新页面）

这是 nuxt-dict 内置的能力，无需额外代码。

当 @nuxtjs/i18n 切换语言（比如用户点击语言切换按钮）时：

@nuxtjs/i18n 切语言
  → 写入 cookie i18n_redirected = 'en-US'
    → nuxt-dict cookie watch 检测到变化
      → DictManager.setLocale('en-US') → 清空缓存
        → useDict / useDictTree watch 触发
          → 自动用新语言重新请求字典数据

用户不需要写任何 watch 或 refresh() 代码——所有 useDict、useDictTree、useDict 组件会自动重新加载。

完整配置示例

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@lacqjs/nuxt-dict', '@nuxtjs/i18n'],

  // nuxt-dict 配置
  dict: {
    api: { baseURL: '', dictEndpoint: '/api/dict/list' },
    locale: {
      source: 'cookie', // 默认值，不用改
      cookieKey: 'i18n_redirected', // 默认值，与 @nuxtjs/i18n 共享同一个 cookie
      default: 'zh-CN',
    },
  },

  // @nuxtjs/i18n 配置
  i18n: {
    locales: ['zh-CN', 'en-US', 'ja-JP'],
    defaultLocale: 'zh-CN',
    strategy: 'prefix_except_default',
  },
});

各种 strategy 下的行为

@nuxtjs/i18n strategy	切换语言时 URL 变吗	useDict 会重取吗
`prefix_except_default`（默认）	变（`/about` → `/en/about`）	✅ 自动重取
`prefix`	变（`/zh/about` → `/en/about`）	✅ 自动重取
`no_prefix`	不变	✅ 自动重取（via cookie watch）

无论哪种策略，字典数据都会自动同步——prefix_* 策略下路由变化会触发组件重建（自然重取），no_prefix 策略下 cookie watch 兜底。

注意事项

确保 nuxt-dict 的 locale.cookieKey 与 @nuxtjs/i18n 的 detection.cookieKey 保持一致。如果你修改了任一方的 cookie 名称，另一方也要同步修改。

树形字典（useDictTree）在语言切换时同样会自动重取，但当前选中的节点不会自动重新选择。如果级联选择器的值是用 code 存储的，翻译文本会自动更新；如果值是 label 文本，语言切换后可能需要业务代码额外处理。

SSR 预取时，服务端根据首次请求的语言获取数据。客户端 hydration 后如果语言不同，会自动重新获取。如果发现首屏短暂显示了错误语言的数据，这是正常的水合过程。

本章你学会了

理解 nuxt-dict 与 @nuxtjs/i18n 通过共享 cookie 自动同步的原理
配置两个模块共用一份语言信息
在 no_prefix 策略下验证字典随语言切换自动更新
理解不同 strategy 下字典数据更新机制