如何使用查询参数（例如“?lang=en”）更改 Vue.js 应用程序中的语言？

Question

我正在开发一个 Vue.js 应用程序，使用 Pinia 进行状态管理。我有一个包含三种语言（EN、RU、TJ）的多语言应用程序，我想使用查询参数实现语言切换。

这是我的代码的简化版本：
这是我的 main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createI18n } from 'vue-i18n';
import { createPinia } from 'pinia';
import { productsStore } from './stores/products';
import EN from '../src/locale/en.json';
import RU from '../src/locale/ru.json';
import TJ from '../src/locale/tj.json';

const pinia = createPinia();
const app = createApp(App);

app.use(router);
app.use(pinia);

const store = productsStore();

const i18n = createI18n({
  legacy: false,
  locale: store.locale,
  messages: {
    EN: EN,
    RU: RU,
    TJ: TJ
  }
});

app.use(i18n);
app.mount('#app');

这是store.js

import { defineStore } from "pinia";

export const productsStore = defineStore('products', {
    state: () => ({
        locale: 'TJ',
    }),
})

路由器.js

import {
    createRouter,
    // createWebHashHistory
    createWebHistory
} from "vue-router";
import Birthday from '../views/Birthday.vue'
import Gifts from '../views/Gifts.vue'
import Discounts from '../views/Discounts.vue'
import Mbback from '../views/Mb_back.vue'

const routes = [{
        path: '/',
        name: 'birthday',
        component: Birthday
    },
    {
        path: '/gifts',
        name: 'gifts',
        component: Gifts
    },
    {
        path: '/discounts',
        name: 'discounts',
        component: Discounts
    },
    {
        path: '/mb_back',
        name: 'mb_back',
        component: Mbback,
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

我尝试根据查询参数在我的 Pinia 商店中设置区域设置，但它似乎没有按预期工作。我还设置了路线，并且希望当用户在 URL 中提供

lang

查询参数时更改语言。

我在实施过程中遗漏了什么或做错了什么？关于如何使用 Pinia 和查询参数在 Vue.js 应用程序中正确实现语言切换有什么建议吗？

Answer 1

const language = ref(route.query?.language); // initialize variable with change tracking capabilities from home?lang=en

watchEffect(() => {
   language.value = route.query?.language // update whenever the lang=en on address changes
   if (language.value === 'en') {
   }
   else if (language.value === 'fr') {
   }
}