vue3+vue-i18n 监听语言的切换

一只爱吃糖的小羊2023-08-09 12:24

最近在用 vue3 做一个后台管理系统，之前是只考虑中文，现在加了个需求是多语言。

本来也不是太难的需求，但是我用的并不熟悉，并且除了页面展示不同的语言，需求是在切换语言的时候在几个页面中需要做出一些自定义的行为，所以需要监听语言的变化，所以记录一下。

如上所述，如果只是在页面中展示不同语言的文字，还是很简单的，只需要安装、配置 vue-i18n 之后，在页面中用 $t('变量名')就行了（这里指的是 html 中，如果是 ts/js 中需要用$ t 还要配置一下，如果有需要可以参考这里：vue3中使用vue-i18n

但之前没有关注监听语言变化并做出反应，功能做通了之后发现其实其实挺简单的。

复制代码

安装、配置 vue-i18n 可以参考 上篇文章 [vue3中使用vue-i18n ](https://blog.csdn.net/JaneLittle/article/details/127112273)，假如在某个组件中要监听语言的变化：
1. 在 hooks 文件夹中建一个 locale.ts 文件，文件内容：

import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { Message } from '@arco-design/web-vue';

export default function useLocale() {
  const i18 = useI18n();
  const currentLocale = computed(() => {
    return i18.locale.value;
  });
  const changeLocale = (value: string) => {
    i18.locale.value = value;
    localStorage.setItem('arco-locale', value);
    Message.success(i18.t('navbar.action.locale'));
  };
  return {
    currentLocale,
    changeLocale,
  };
}

在要监听语言变化的页面

import { watch } from 'vue';
import useLocale from '@/hooks/locale'; // 引入

const { currentLocale } = useLocale();
watch(currentLocale, (newValue, oldValue) => {
console.log('组件名----语言变化');
console.log(newValue: ${newValue});
console.log(oldValue: ${oldValue});
});

这么看确实是挺简单的，并且在 ts 中如果不用 $t 用 i18.t 也挺方便的。

如果在不同的页面监听语言的变化并且做出统一的行为(比如提示"已经切换到某语言")，可以调用 changeLocale 方法：

复制代码

import useLocale from '@/hooks/locale';

  const { changeLocale } = useLocale();

  // html
  <el-select  @change="changeLocale">
    ...   // 代码
  </el-select>

希望对您有所帮助，也希望路过的大佬不吝赐教！