pinia actions 封装多语言异步加载逻辑,包含按需拉取、合并词条、错误降级、可取消及状态反馈;state 定义 locale、localedata、loading、error;action fetchlocale 实现防重、加载中标识、api 调用、深合并与错误捕获;api 层统一管理路径、fallback 与 abortcontroller;组件中 await 或忽略 promise,模板响应式绑定并控制 ui 状态。

Pinia Actions 处理多语言词条异步加载,核心是把“按需拉取语言包 + 合并到当前 locale 状态 + 支持错误降级”封装进一个可复用、可取消、带状态反馈的异步 Action 中。不推荐在组件里直接 fetch 语言文件,也不建议一次性预加载全部语言包。
定义配套状态字段:loading / error / localeData
在 Store 的 state 中明确声明多语言相关响应式字段:
- locale:当前激活的语言标识(如 'zh-CN'、'en-US')
- localeData:对象类型,存放已加载的词条键值对(如 {'login.title': '登录', 'common.ok': '确定'})
- loading:布尔值,标识当前是否正在加载某语言包
- error:字符串或 null,记录最近一次加载失败的原因(用于 UI 提示或静默重试)
异步 Action 封装加载逻辑:fetchLocale
在 actions 中编写 async fetchLocale(locale: string),它应完成以下几件事:
- 若目标 locale 已加载,直接返回,避免重复请求
- 设置 this.loading = true 和 this.error = null
- 调用独立的 api.loadLocale(locale)(该函数返回 Promise,内部用 fetch 或 axios,支持传入 signal)
- 成功后深合并(或全量替换)this.localeData,并更新 this.locale
- 失败时捕获网络错误、404、JSON 解析异常等,赋值给 this.error,并可选抛出以便上层处理
- 无论成败,最后设 this.loading = false
API 层抽离与路径约定
在 src/api/i18n.ts 中统一管理语言包请求逻辑:
- 语言包路径建议按 /locales/{locale}.json 组织,例如 /locales/en-US.json
- 导出函数 loadLocale(locale: string): Promise
> ,内部自动拼接路径、设置 headers、处理 404 时 fallback 到默认语言(如 zh-CN) - 支持 AbortController:每次调用前生成新 controller,传 signal 给 fetch;若同一 locale 多次触发(如快速切换),上一个请求自动 abort,防止状态覆盖错乱
组件中安全调用与响应式联动
组件使用时注意两点:
- 调用 store.fetchLocale('ja-JP') 后,可 await 它,也可忽略 Promise(因状态已在 store 内更新)
- 模板中直接绑定 {{ store.localeData['login.title'] }},配合 v-if="!store.loading" 控制骨架屏或占位文案,用 v-else-if="store.error" 显示友好提示(如“语言加载失败,请重试”)











