如何用Vue-i18n处理带独立翻译的动态自定义变量项？

你不需要自己实现翻译逻辑，vue-i18n本身就支持处理这种远程获取的带翻译的条目，以下是两种常用的现成方案：

方案一：将远程翻译项合并到vue-i18n全局资源 #

这是最推荐的方式，直接复用vue-i18n的翻译体系，自动支持语言切换、fallback等特性，无需自定义函数。

示例代码：

<template>
  <div class="products">
    <ul>
      <li v-for="(value, key) in items" :key="key">
        {{ $t(key) }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { i18n } from '../lang/i18n'
import { onMounted, ref } from 'vue'

const items = ref({})

// 模拟远程获取翻译条目
const fetchItems = async () => {
  return {
    title: {
      en: 'english title',
      de: 'englischer Titel'
    },
    desc: {
      en: 'english description',
      de: 'deutsche beschreibung'
    },
    upcoming: {
      en: 'english upcoming'
    }
  }
}

onMounted(async () => {
  items.value = await fetchItems()
  // 将每个语言的翻译项合并到对应locale的资源中
  Object.keys(items.value).forEach(key => {
    Object.keys(items.value[key]).forEach(locale => {
      i18n.global.mergeLocaleMessage(locale, { [key]: items.value[key][locale] })
    })
  })
})
</script>

这样处理后，$t(key)会自动根据当前语言返回对应翻译，找不到时自动 fallback 到预设的 fallbackLocale，语言切换时也会实时更新。

方案二：直接基于vue-i18n的响应式变量获取翻译 #

如果不想把条目合并到全局资源，可以利用vue-i18n提供的响应式locale变量来实现，比你自定义的函数更贴合框架风格：

<template>
  <div class="products">
    <ul>
      <li v-for="(value, key) in items" :key="key">
        {{ getTranslation(key) }}
      </li>
    </ul>
  </div>
</template>

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

const { locale, fallbackLocale } = useI18n()

// 远程获取的条目
const items = {
  title: {
    en: 'english title',
    de: 'englischer Titel'
  },
  desc: {
    en: 'english description',
    de: 'deutsche beschreibung'
  },
  upcoming: {
    en: 'english upcoming'
  }
}

// 响应式获取翻译，语言切换时自动更新
const getTranslation = computed(() => (key) => {
  return items[key][locale.value] || items[key][fallbackLocale.value]
})
</script>

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