如何在所有Vue3组件中设置全局响应式locale国际化语言

你现在的代码之所以同步失效，是两个逻辑错误导致的，不需要额外实现EventBus，vue-i18n本身就支持全局响应式的locale状态，完全可以满足你的需求：

问题根因 #

• 你在navbar.vue内重复调用createI18n()生成了独立的局部i18n实例，和项目全局注册的i18n实例完全隔离，你修改这个局部实例的locale，其他组件根本感知不到。
• home.vue里仅在组件初始化时读取了一次locale的值赋值给state.locale，没有做后续的变化监听，即便全局locale更新，state里的值也不会同步更新。

修复步骤 #

1. 先确保i18n全局注册正确 #

确认你的项目入口文件（main.js/main.ts）是全局初始化并挂载i18n的，示例代码：

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'

const i18n = createI18n({
  legacy: false, // 要开启组合式API支持必须设为false
  locale: 'en', // 默认语言
  // 你没用到messages可以不配置这个字段
})

const app = createApp(App)
app.use(i18n)
app.mount('#app')

2. 修正navbar.vue代码 #

删除组件内自己创建的i18n实例，直接用useI18n获取全局实例修改locale：

<template>
  <div class="nav-bar">
    <fa class="icon-locale" @click="toggleLocale" :icon="[ 'fa', 'language' ]" size="2x"></fa>
    <div class="locale-menu" :class="{ locale__open: isActiveLocale }">
      <p @click="toggleLocale(); setLocale('en');">en</p>
      <p @click="toggleLocale(); setLocale('de');">de</p>
      <p @click="toggleLocale(); setLocale('ar');">ar</p>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useI18n} from 'vue-i18n'; 

const isActiveLocale = ref(false);
const toggleLocale = () => {
    isActiveLocale.value = !isActiveLocale.value;
}
const { locale } = useI18n() // 取全局实例的响应式locale
const setLocale = (newLocale) => {
    locale.value = newLocale // 直接修改value即可全局生效
};
</script>

3. 修正home.vue代码 #

两种方案可选，更推荐第一种，不需要额外维护state：

方案一：直接使用i18n的响应式locale（推荐）

<template>
  <section id="home" class="home">
    <h2>{{ state.heading[locale.substring(0, 2)] }}</h2>
  </section>
</template>

<script setup>
import {reactive} from 'vue';
import {useI18n} from 'vue-i18n';

const {locale} = useI18n()
// 你的业务状态
const state = reactive({
    heading: {
      en: '英文标题',
      de: '德语标题',
      ar: '阿拉伯语标题'
    }
})
</script>

方案二：确实需要同步到自己的state里，加watch监听即可

<template>
  <section id="home" class="home">
    <h2>{{ state.heading[state.locale] }}</h2>
  </section>
</template>

<script setup>
import {reactive, watch} from 'vue';
import {useI18n} from 'vue-i18n';

const {locale} = useI18n()
const state = reactive({
    locale: locale.value.substring(0, 2)
})

// 监听locale变化，同步更新state.locale
watch(locale, (newVal) => {
  state.locale = newVal.substring(0, 2)
})
</script>

即便你不使用vue-i18n的messages翻译功能，它的全局响应式locale状态也可以正常使用，不需要额外开发跨组件通信逻辑。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov