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;
};

它不能以反應性的方式進行。