vuejs3 I18n und Kompositions-API

Question

Ich verwende derzeit vueJS, um eine Front-End-Schnittstelle zu erstellen, und verwende derzeit vuejs 3 und i18n. Die i18n-Implementierung funktioniert normal einwandfrei, aber wenn ich sie mit der Kompositions-API verwenden möchte, treten Probleme auf.

Also, was habe ich getan? Mein main.js sieht so aus:

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

Ich habe in der Dokumentation gesehen, dass ich Legacy:false hinzufügen musste, um die Kompositions-API zu verwenden, also habe ich das getan. Dann funktioniert mein $t nicht mehr. Ich schaute weiter in die Dokumentation und gelangte zu der Stelle, an der ich mich verlaufen hatte. In der Dokumentation heißt es, Folgendes zu verwenden:

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

Mein Problem ist, dass meine createApp bereits so verwendet wird:

const app = createApp(App)

Dies ist die Standardimplementierung von Vuejs. Ich habe versucht, es zu ändern, Einstellungen nach der App hinzuzufügen, und das Löschen der App hatte keine Auswirkung, und ich glaube, ich mache immer mehr dumme Dinge.

Weiß jemand, wie man i18n mit der Kompositions-API zum Laufen bringt? Das Endziel besteht im Wesentlichen darin, die mit der Kompositions-API erstellte Komponente „switchLanguage“ zu verwenden, um auf $i18n zuzugreifen (einige Informationen abzurufen und meinen Sprachwechsel zu verwalten)

Vielen Dank im Voraus für jede Hilfe.

Answer 1

您已经在应用程序上的 main.js 中实例化了 i18n。这是重要的一点。

文档中提供的示例不一定必须在 createApp 中定义的实例上完成。它适用于任何组件，只要您在 main 上实例化了 i18n。(js|ts)

这适用于任何组件（无论您需要 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