Vue3+TS 国际化文本处理

近段时间，实现了几个项目的国际化处理，大都是使用的vue-i18n。整理了相关思路与实现逻辑，在此记录总结一下。

1. 引入相关依赖

// locale.ts
import { watch } from 'vue';
import { createI18n } from 'vue-i18n';
import { useStorage } from '@vueuse/core';
// 引入国际化翻译文本
import zhCn from './zh_cn';
import enUs from './en_us';

2. 相关常量的初始化，包括语言的枚举类型、默认语言等。

const enum Language {
  ZH_CN = 'zh-cn',
  EN_US = 'en-us',
}

// 持久化存储所需的key与value
const LOCALSTORAGE_LOCALE = 'locale';
const DEFAULT_LOCALE = Language.ZH_CN;

// 国际化语言数组，用于下拉框等
const LANGUAGES = [Language.ZH_CN, Language.EN_US]; 

// localStorage/sessionStorage 视具体情况而定
const currentLocale = useStorage<Language>(LOCALSTORAGE_LOCALE,DEFAULT_LOCALE);

3. createI18n创建国际化实例，具体配置可查看官网。

const i18n = createI18n({
  locale: currentLocale.value,
  fallbackLocale: DEFAULT_LOCALE,
  messages: {
    // 此处即为配置的有关国际化的文本文件
    [Language.ZH_CN]: zhCn,
    [Language.EN_US]: enUs,
  },
  legacy: false,
});

4. 监听国际化语言变化

watch(
  () => currentLocale.value,
  newLocale => {
    // 当currentLocale的值发生变化时，同步更新到i18n实例上
    i18n.global.locale.value = newLocale;
  }
);

5. 给外界提供一个可以改变当前国际化语言的函数

const toggleLanguage = (language?:Language) => {
  currentLocale.value = language ?? DEFAULT_LOCALE;
}

6. 导出方法

export const $t = (key: string) => i18n.global.t(key);
export default i18n;
export { Language, DEFAULT_LOCALE, LANGUAGES, currentLocale, toggleLanguage };

7. 外部使用

我们以一个下拉框(el-select)为例子来使用国际化文本切换。实际使用时的触发函数及逻辑应视具体情况而定

// useLocalLanguage.vue
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { toggleLanguage, LANGUAGES } from './locale';

// vue-i18n中有实例方法供使用，获取当前的国际化语言
const { locale } = useI18n();
const currentLanguage = computed(() => locale.value);
</script>

<template>
  <el-select v-model="value" size="large">
    <el-option v-for="item in LANGUAGES" :key="item" @click="toggleLanguage(item)">{{ $t(item) }}
    </el-option>
  </el-select>
</template>