Vue.js中用i18n和Pinia切换语言时更新翻译文本的方法

问题根源 #

• Pinia store定义错误：将state误写为store，导致状态无法被Pinia正确追踪
• 语言切换逻辑不完整：仅更新了localStorage和Pinia状态，未同步更新vue-i18n的locale以及Quasar的语言配置
• 初始化逻辑脱节：i18n初始化时直接读取localStorage，未与Pinia状态联动，无法响应后续状态变化

代码修复步骤 #

1. 修正Pinia语言Store #

修改语言Store文件，修正state定义并完善切换逻辑：

import { defineStore } from 'pinia'
import { i18n } from '../utils/i18n'
import { Quasar } from 'quasar'

// 按需导入Quasar语言包
import esLang from 'quasar/lang/es'
import enLang from 'quasar/lang/en'
import deLang from 'quasar/lang/de'
// 补充其他需要的语言包...

const quasarLangMap = {
  es: esLang,
  en: enLang,
  de: deLang,
  // 对应添加其他语言映射
}

export const useLanguageStore = defineStore('languages', {
  // 修正：使用state而非store
  state: () => {
    return {
      // 初始化时优先读取localStorage，默认值设为'es'
      language: localStorage.language ?? 'es',
    }
  },
  actions: {
    setNewLanguage(newLanguage) {
      const availableLocales = ['de', 'en', 'es', 'ja', 'pt', 'ru', 'zh']
      // 校验传入语言是否在可用列表中
      if (!availableLocales.includes(newLanguage)) return

      // 同步更新所有关联部分
      this.language = newLanguage
      localStorage.setItem('language', newLanguage)
      // 更新vue-i18n的locale
      i18n.global.locale.value = newLanguage
      // 更新Quasar的语言配置
      Quasar.lang.set(quasarLangMap[newLanguage])
    }
  },
})

2. 调整i18n初始化逻辑 #

修改utils/i18n.js，确保初始化locale与存储状态一致：

import { createI18n } from 'vue-i18n'
import messages from '@intlify/unplugin-vue-i18n/messages'

export const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  // 初始化时从localStorage读取，默认回退到'es'
  locale: localStorage.language ?? 'es',
  fallbackLocale: 'es',
  availableLocales: ['de', 'en', 'es', 'ja', 'pt', 'ru', 'zh'],
  messages: messages
});

3. 组件中正确调用切换方法 #

在语言选择组件中，调用Store的切换方法：

<template>
  <select @change="handleLangChange">
    <option value="es">Español</option>
    <option value="en">English</option>
    <option value="de">Deutsch</option>
    <!-- 添加其他语言选项 -->
  </select>
</template>

<script setup>
import { useLanguageStore } from '../stores/language'

const langStore = useLanguageStore()

const handleLangChange = (e) => {
  langStore.setNewLanguage(e.target.value)
}
</script>

4. 确保组件响应语言变化 #

在使用翻译的组件中，通过vue-i18n提供的方式调用翻译，确保组件能感知locale变化：

<!-- 全局注入写法 -->
<template>
  <h1>{{ $t('welcome.title') }}</h1>
</template>

<!-- 组合式API写法 -->
<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>
<template>
  <h1>{{ t('welcome.title') }}</h1>
</template>

关键说明 #

• 语言切换必须同步更新Pinia状态、localStorage、vue-i18n locale、Quasar语言配置四个部分，才能实现全应用语言切换
• Pinia的state必须正确定义，否则状态变化无法被组件追踪，导致不重渲染
• vue-i18n的locale是响应式值，更新后所有使用翻译的组件会自动触发重渲染

内容的提问来源于stack exchange，提问作者Saco04