如何在所有ve3组件中设置响应式语言环境?

Question

我有以下项目结构(index.vue):

<template>
<div class="container">
<navbar></navbar>
<social-media-bar></social-media-bar>
<main>
<home></home>
<news></news>
<vision></vision>
<event-section></event-section>
<artwork></artwork>
<about></about>
<donate></donate>
<contact></contact>
<partners></partners>
</main>
<footer-component></footer-component>
</div>
</template>

我想从navbar.vue里面改变app-language:

<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 {createI18n} from 'vue-i18n';
const isActiveLocale = ref(false);
const toggleLocale = () => {
isActiveLocale.value = !isActiveLocale.value;
}
const i18n = createI18n({});
const setLocale = (locale) => {
i18n.global.locale = locale
};
</script>

基本上，这打开了一个en, de, ar区域设置的locale menu，启动一个@click事件，相应地改变i18n.global.locale。

我需要在home组件中设置新设置的i18n.global.locale。

home.vue:

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

<script setup>
import {reactive} from 'vue';
import {useI18n} from 'vue-i18n';
const {locale} = useI18n()
const loc = locale.value.substring(0, 2)
const state = reactive({
locale: loc
})
</script>

我想要的是将navbar.vue中新设置的i18n.global.locale反应性地变为home.vue中的state.locale。由于navbar和home没有parent/child，我是否必须为此构建EventBus，或者是否有更优雅的解决方案，也许是i18n库?

编辑:

这是函数，应该在全局上改变locale，但它只在i18n内设置它，看起来唯一可能的反应性是i18n的messages，我不使用。

const setLocale = () => {
i18n.global.locale = 'de'
console.log(i18n.global.locale);
};

我需要全局地改变locale字符串，这样我就可以在所有组件中使用它。

Answer 1

i18n.js

import { createI18n } from "vue-i18n";
export const i18n = createI18n({
locale: "en",
messages: {
en: {
message: {
language: "Language",
hello: "hello world!"
}
},
ja: {
message: {
language: "言語",
hello: "こんにちは、世界！"
}
}
}
});

main.js

import { createApp } from "vue";
import App from "./App.vue";
import { i18n } from "./i18n";
createApp(App).use(i18n).mount("#app");

App.vue

<template>
<button @click="switch">switch to ja</button>
<p>{{ $t("message.hello") }}</p>
</template>
<script>
export default {
name: "App",
methods: {
switch() {
// $i18n is reactively
this.$i18n.locale = "ja";
},
},
};
</script>

Answer 2

我发现了一种超级简单的方法来传递vue与sessionStorage组件之间的变量。定义:

sessionStorage.whatever = 'whateverYouWant'

，您可以在所有组件中使用sessionStorage.whatever。除了localStorage，当浏览器/选项卡关闭时，sessionStorage将重置。我用它来传递选定的locale。