Vue 3 组合式 API 的 i18n 本地化未更新

Question

我正在尝试通过点击按钮来更改Vue-i18n的区域设置。但是当我点击按钮时，什么都没有发生。也没有任何错误。如何解决这个问题？

<button v-on:click.prevent="setLocale('id')">Ind</button>
<button v-on:click.prevent="setLocale('en')">Eng</button>

import i18n from "../i18n";
const setLocale = (lang) => {
  i18n.global.locale = lang;
};

Answer 1

可能还有其他问题，但代码中至少有一个错误。 i18n.global.locale 是一个 ref，应该使用如下方式：

const setLocale = (lang) => {
  i18n.global.locale.value = lang;
};

它不能以反应性的方式进行。