vuejs3 I18n 和组合 API-PHP中文网问答

我现在正在使用 vueJS 做一个前端界面，并且目前正在使用 vuejs 3 和 i18n。 i18n 的实现按正常方式工作得很好，但是当我想将它与组合 API 一起使用时，就会出现问题。

所以我做了什么。我的 main.js 如下所示：

const i18n = createI18n({
    messages: {
        en: en,
        fr: fr
    },
    fallbackLocale: 'en',
    locale: localStorage.Language || navigator.language.split('-')[0] || 'en',
})
const app = createApp(App)


app.use(router)
app.use(i18n)

app.mount('#app')

我在文档中看到要使用组合API，我必须添加legacy:false，所以我这样做了。然后我的 $t 就不再起作用了。我进一步查看文档并到达了我迷失的地方。文档说要使用这个：

const app = Vue.createApp({
  setup() {
    const { t } = VueI18n.useI18n() // call `useI18n`, and spread `t` from  `useI18n` returning
    return { t } // return render context that included `t`
  }
})

我的问题是我的createApp已经像这样使用了：

const app = createApp(App)

这是 Vuejs 的默认实现。我尝试修改它，在应用程序之后添加设置，之前，删除应用程序没有任何效果，我认为我做了越来越多的愚蠢的事情。

有人知道如何让 i18n 与组合 API 一起工作吗？最终目标基本上是使用组合 API 制作的组件 switchLanguage 来访问 $i18n （获取一些信息并管理我的语言切换）

预先感谢您提供的帮助。