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 

旁注：所有 $tc (复数化 ) 功能已移至 t。

如果您要升级现有应用程序，并且不想通过模板并将 $t 和 $tc 的所有实例替换为 t：

setup: () => ({ 
  $t: useI18n().t
  $tc: useI18n().t 
})

---

要使 $t 和 $tc 在任何组件的 <template> 中可用，而不必在 <script> （或 <script setup>）中导入和公开它们：

import App from './App.vue'
import { useI18n } from 'vue-i18n'

const app = createApp(App);
app.config.globalProperties.$t = useI18n().t

• 如果您在 <script> 中仍然需要它们，请从 'vue-i18n' 导入，如上所示。
• $tc 在 Vue3 中不再使用。如果您的模板来自 Vue2，最好将所有 $tc 替换为 $t。或者，如果您不想触及模板，您可以将 useI18n().t 分配给两者：

Object.assign(app.config.globalProperties, {
  $t: useI18n().t,
  $tc: useI18n().t
})