vuejs3 I18n et API de composition

Question

J'utilise actuellement vueJS pour créer une interface frontale, et j'utilise actuellement vuejs 3 et i18n. L'implémentation i18n fonctionne normalement, mais lorsque je souhaite l'utiliser avec l'API de composition, des problèmes surviennent.

Alors qu’est-ce que j’ai fait. Mon main.js ressemble à ceci :

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')

J'ai vu dans la documentation que pour utiliser l'API de composition, je devais ajouter Legacy:false, alors je l'ai fait. Ensuite, mon $t ne fonctionne plus. J'ai regardé plus loin dans la documentation et suis arrivé là où j'étais perdu. La documentation dit d'utiliser ceci :

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`
  }
})

Mon problème est que ma createApp est déjà utilisée comme ceci :

const app = createApp(App)

Il s'agit de l'implémentation par défaut de Vuejs. J'ai essayé de le modifier, d'ajouter des paramètres après l'application, avant, et la suppression de l'application n'a aucun effet et je pense que je fais de plus en plus de bêtises.

Est-ce que quelqu'un sait comment faire fonctionner i18n avec l'API de composition ? L'objectif final est essentiellement d'utiliser le composant switchLanguage réalisé avec l'API de composition pour accéder à $i18n (obtenir des informations et gérer mon changement de langue)

Merci d'avance pour toute aide.

Answer 1

Vous êtes déjà sur l'application main.js 中实例化了 i18n. C'est un point important.

Les exemples fournis dans la documentation ne doivent pas nécessairement être présents createApp 中定义的实例上完成。它适用于任何组件，只要您在 main 上实例化了 i18n。(js|ts)

Cela fonctionne pour n'importe quel composant (quels que soient vos besoins t) :

import { useI18n } from "vue-i18n";

export default defineComponent({
  setup() {
    const { t } = useI18n();
    // you can now use t('some.text.to.be.translated')
    // t('some.text.to.be.pluralized', { n: 1 }, 1);

    return {
      // expose `t` to