持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

0x00 前言

本文将对 Vue-Vben-Admin 的状态管理之国际化源码实现进行分析解读，耐心读完，相信您一定会有所收获!

0x01 locale.ts 国际化

文件 src\store\modules\locale.ts 声明导出一个store实例 useLocaleStore 、一个方法 useLocaleStoreWithOut()用于没有使用 setup 组件时使用。

// 错误日志存储实例
export const useAppStore = defineStore({
  id: 'app-locale',  
  state: {},
  getters: {}
  actions：{}   
});

export function useLocaleStoreWithOut() {
  return useLocaleStore(store);
}

State/Getter

状态对象定义了国际化设置 localInfo 。

state: (): LocaleState => ({
  localInfo: lsLocaleSetting,
}), 
getters: {
  // 是否显示语言选择器
  getShowPicker(): boolean {
    return !!this.localInfo?.showPicker;
  },
  // 当前语言 默认 简体中文
  getLocale(): LocaleType {
    return this.localInfo?.locale ?? 'zh_CN';
  },
},

类型定义了语言选择器、当前语言、默认语言、可用语言等。

// 国际化State 
interface LocaleState {
  localInfo: LocaleSetting;
}

// 国际化设置
export interface LocaleSetting {
  // 是否显示语言选择器
  showPicker: boolean;
  // 当前语言
  locale: LocaleType;
  // 默认语言
  fallback: LocaleType;
  // 可用语言
  availableLocales: LocaleType[];
}

// 语言类型
export type LocaleType = 'zh_CN' | 'en' | 'ru' | 'ja' | 'ko';

通过 localStorage缓存或者系统配置初始化 localInfo 。

const ls = createLocalStorage();
// 获取 localStorage缓存或系统配置信息
const lsLocaleSetting = (ls.get(LOCALE_KEY) || localeSetting) as LocaleSetting;

在  src/settings/localeSetting.ts 内可以进行配置，只有 zh_CN 和 en 两种语言。

export const LOCALE: { [key: string]: LocaleType } = {
  ZH_CN: 'zh_CN',
  EN_US: 'en',
};

// 项目国际化配置初始值
export const localeSetting: LocaleSetting = {
  // 是否显示语言选择器
  showPicker: true,
  // 当前语言 简体中文
  locale: LOCALE.ZH_CN,
  // 默认语言 简体中文
  fallback: LOCALE.ZH_CN,
  // 允许的语言 简体中文、English
  availableLocales: [LOCALE.ZH_CN, LOCALE.EN_US],
};

语言选择器就是在登录页或顶栏右上角的 icon, 点击后出现可选的语言列表，并高亮当前语言。

Actions

setLocaleInfo 方法用于设置多语言信息并使用localStorage缓存。

// 设置多语言信息并缓存
setLocaleInfo(info: Partial<LocaleSetting>) {
  this.localInfo = { ...this.localInfo, ...info };
  ls.set(LOCALE_KEY, this.localInfo);
}, 

initLocale 方法用于初始化多语言信息并从本地缓存加载现有配置。

initLocale() {
  this.setLocaleInfo({
    ...localeSetting,
    ...this.localInfo,
  });
},

initLocale 方法在 初始化内部系统配置 步骤中被调用执行。

// src/main.ts
initAppConfigStore();

// src\logics\initAppConfig.ts
// 初始化项目配置
export function initAppConfigStore() {
  const localeStore = useLocaleStore(); // 国际化状态管理
  ... 
  localeStore.initLocale();
  ...
}

0x02 📚参考

"展开语法(Spread syntax)",MDN
"国际化",vben admin

0x03 关注专栏

此文章已收录到专栏中 👇，可以直接关注。