如何从Vue-i18n中获取配置的回退区域设置字符串并遍历回退区域设置？

我明白你的困扰——在Vue 3的vue-i18n非legacy模式下，fallbackLocale返回的是FallbackLocales类型，这个类型支持更灵活的回退配置（比如针对不同区域设置不同回退链），所以没法直接用for...in遍历。不过别担心，我们可以用vue-i18n内置的方法轻松解决这个问题，完美适配你的API翻译场景。

最优解决方案：使用resolveFallbackLocale获取回退链数组 #

vue-i18n提供了resolveFallbackLocale方法，它会根据当前的locale和你配置的fallback规则，自动返回一条完整的可遍历回退locale字符串数组。不管你当初把fallbackLocale配置成字符串、数组还是对象，这个方法都能处理。

具体实现代码如下：

import { useI18n } from "vue-i18n";

// 注意这里要获取i18n实例本身
const { locale, i18n } = useI18n();

const myRecord: Record<string, string> = { "en": "title", "de": "titel" };

function getContent(): string {
  // 先检查当前locale是否存在于翻译记录中
  if (locale.value in myRecord) {
    return myRecord[locale.value];
  }

  // 获取当前locale对应的完整回退链数组
  const fallbackChain = i18n.resolveFallbackLocale(locale.value);
  
  // 遍历回退链，找到第一个匹配的翻译
  for (const fallbackLoc of fallbackChain) {
    if (fallbackLoc in myRecord) {
      return myRecord[fallbackLoc];
    }
  }

  // 所有locale都未匹配到的情况
  throw new Error('missing translation...');
}

手动处理类型的备选方案 #

如果你不想依赖实例方法，也可以手动判断fallbackLocale的类型，将其转换成可遍历的数组：

import { useI18n } from "vue-i18n";

const { locale, fallbackLocale } = useI18n();

const myRecord: Record<string, string> = { "en": "title", "de": "titel" };

function getContent(): string {
  if (locale.value in myRecord) {
    return myRecord[locale.value];
  }

  // 将fallbackLocale转换为数组
  let fallbackArray: string[] = [];
  const fallbackVal = fallbackLocale.value;

  if (typeof fallbackVal === 'string') {
    fallbackArray = [fallbackVal];
  } else if (Array.isArray(fallbackVal)) {
    fallbackArray = fallbackVal;
  } else if (typeof fallbackVal === 'object') {
    // 处理对象式回退配置，匹配当前locale对应的回退链
    fallbackArray = fallbackVal[locale.value] || [];
  }

  // 遍历回退数组
  for (const fallbackLoc of fallbackArray) {
    if (fallbackLoc in myRecord) {
      return myRecord[fallbackLoc];
    }
  }

  throw new Error('missing translation...');
}

不过这种方法需要自己处理所有可能的类型情况，不如resolveFallbackLocale省心，毕竟官方方法已经封装了所有边界情况的处理。

备注：内容来源于stack exchange，提问作者baitendbidz