VueI18n组合式API下locale无法读取或修改的问题

问题分析 #

你遇到的核心问题是：useI18n返回的locale并非文档描述的WritableComputedRef<string>类型，而是直接返回字符串值，导致无法通过.value读写，触发类型错误。这通常是全局i18n实例的响应式绑定未正确传递到组件的useI18n调用中所致。

解决方案 #

方案1：直接使用全局i18n实例的Locale引用 #

跳过useI18n返回的locale，直接从你创建的i18n实例中获取全局响应式locale，这是最直接的修复方式：

import { useI18n } from "vue-i18n";
import i18n from "./translations"; // 导入你的全局i18n实例

export default defineComponent({
  setup() {
    const { t } = useI18n({ useScope: 'global' });
    const locale = i18n.global.locale; // 此处获取的是标准WritableComputedRef

    console.log(locale.value); // 正确输出当前语言（如fr）
    locale.value = 'en'; // 正常赋值，无报错
    // ...其他逻辑
  }
});

方案2：检查并升级VueI18n版本 #

确保你使用的是VueI18n v9.x及以上版本（仅该版本正式支持组合式API），同时Vue版本需为3.x。执行以下命令升级依赖：

npm update vue-i18n
# 或使用yarn
yarn upgrade vue-i18n

方案3：显式将初始Locale设置为响应式引用 #

在创建i18n实例时，把初始locale包装为Vue的响应式引用，确保全局Locale的响应式传递链路完整：

import { createI18n } from "vue-i18n";
import { ref } from "vue";

// 将初始语言包装为响应式引用
const initialLocale = ref(navigator.language.split("-")[0] || "en");

const i18n = createI18n({
  legacy: false,           // 必须开启组合式API模式
  globalInjection: true,
  messages: loadLocaleMessages(),
  locale: initialLocale,   // 传入响应式引用而非字符串
  fallbackLocale: "en",
});

export default i18n;

修改后，组件中通过useI18n获取的locale即可正常通过.value读写。

方案4：确认useI18n配置正确性 #

确保组件中useI18n的useScope明确设置为'global'，避免因局部i18n作用域干扰导致返回非响应式的字符串值。如果组件嵌套在局部i18n作用域内，需调整useScope或确保全局作用域的优先级。

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