Vue项目中<v-navigation-drawer>组件语言切换不更新问题求助

核心问题原因 #

你当前的菜单标题仅在组件初始化时通过t函数获取一次值，后续语言切换（locale变化）时，这些值不会自动重新计算。即使使用了ref，也只是存储了初始值，没有建立与locale的响应式关联，导致菜单文本无法更新。

最优解决方案：利用响应式自动更新 #

方案1：将菜单列表改为计算属性（推荐） #

把items定义为computed属性，每次locale变化时自动重新计算标题：

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const items = computed(() => [
  {
    title: t('$vuetify.menuhome'),
    icon: 'mdi-home',
    to: { name: 'Home' }
  },
  {
    title: '-' // 分割线
  },
  {
    title: t('$vuetify.menuabout'),
    icon: 'mdi-information',
    to: { name: 'About' },
  },
  {
    title: t('$vuetify.menudocuments'),
    icon: 'mdi-file-document-multiple-outline',
    to: {name: 'Documents' },
  },
])
</script>

计算属性会自动追踪t函数依赖的locale变化，语言切换时会重新生成items，菜单标题随之更新。

方案2：手动监听locale变化更新菜单 #

如果不想使用计算属性，可以监听locale的变化，手动更新菜单文本：

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

// 初始化菜单文本
const menuhome = ref(t('$vuetify.menuhome'))
let menuabout = t('$vuetify.menuabout')
let menudocuments = t('$vuetify.menudocuments')

const items: DrawerMenuItem[] = [
  { title: menuhome.value, icon: 'mdi-home', to: { name: 'Home' } },
  { title: '-' },
  { title: menuabout, icon: 'mdi-information', to: { name: 'About' } },
  { title: menudocuments, icon: 'mdi-file-document-multiple-outline', to: {name: 'Documents' } },
]

// 监听locale变化，更新菜单文本
watch(locale, () => {
  menuhome.value = t('$vuetify.menuhome')
  menuabout = t('$vuetify.menuabout')
  menudocuments = t('$vuetify.menudocuments')
  
  // 手动更新items中的标题（普通数组需重新赋值触发响应式）
  items[0].title = menuhome.value
  items[2].title = menuabout
  items[3].title = menudocuments
})
</script>

关于从Store向组件发送事件的问题 #

可以实现，且无需额外发送事件，直接监听Store中语言相关状态的变化即可触发组件更新，更符合Vue响应式逻辑：

若使用Pinia #

1. 在Store中维护语言状态：

// stores/locale.ts
import { defineStore } from 'pinia'

export const useLocaleStore = defineStore('locale', {
  state: () => ({
    currentLocale: 'zh-CN'
  }),
  actions: {
    switchLocale(lang: string) {
      this.currentLocale = lang
    }
  }
})

2. 在组件中监听Store状态变化：

<script setup lang="ts">
import { useLocaleStore } from '@/stores/locale'
import { watch, computed } from 'vue'
import { useI18n } from 'vue-i18n'

const localeStore = useLocaleStore()
const { t } = useI18n()

const items = computed(() => [
  { title: t('$vuetify.menuhome'), icon: 'mdi-home', to: { name: 'Home' } },
  // ...其他菜单项
])

// 监听Store中语言变化（可选，若已用computed则无需额外监听）
watch(() => localeStore.currentLocale, () => {
  // 执行更新逻辑
})
</script>

若使用Vuex #

在组件中监听Vuex的语言状态：

<script setup lang="ts">
import { useStore } from 'vuex'
import { watch, computed } from 'vue'
import { useI18n } from 'vue-i18n'

const store = useStore()
const { t } = useI18n()

const items = computed(() => [
  { title: t('$vuetify.menuhome'), icon: 'mdi-home', to: { name: 'Home' } },
  // ...其他菜单项
])

// 监听Vuex中语言状态变化
watch(() => store.state.locale.currentLocale, () => {
  // 执行更新逻辑
})
</script>

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