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

最近在用 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,};
}

2. 在要监听语言变化的页面

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>

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