vuejs3 I18n dan API komposisi

Question

Saya sedang menggunakan vueJS untuk membuat antara muka hadapan, dan pada masa ini menggunakan vuejs 3 dan i18n. Pelaksanaan i18n berfungsi dengan baik dalam cara biasa, tetapi apabila saya ingin menggunakannya dengan API komposisi, masalah timbul.

Jadi apa yang saya buat. Main.js saya kelihatan seperti ini:

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

Saya melihat dalam dokumentasi bahawa untuk menggunakan API gubahan saya perlu menambah legacy:false, jadi saya melakukannya. Kemudian $t saya tidak berfungsi lagi. Saya melihat lebih jauh ke dalam dokumentasi dan sampai ke tempat saya hilang. Dokumentasi mengatakan untuk menggunakan ini:

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

Masalah saya ialah createApp saya sudah digunakan seperti ini:

const app = createApp(App)

Ini ialah pelaksanaan lalai Vuejs. Saya telah cuba mengubah suainya, menambah tetapan selepas apl, sebelum ini, dan memadamkan apl itu tidak memberi kesan dan saya fikir saya sedang melakukan lebih banyak perkara yang bodoh.

Adakah sesiapa tahu bagaimana untuk mendapatkan i18n untuk berfungsi dengan API komposisi? Matlamat akhir pada asasnya ialah menggunakan suis komponenBahasa yang dibuat dengan API komposisi untuk mengakses $i18n (dapatkan sedikit maklumat dan uruskan penukaran bahasa saya)

Terima kasih terlebih dahulu atas sebarang bantuan.

Answer 1

Anda sudah berada di apl main.js 中实例化了 i18n. Ini adalah satu perkara penting.

Contoh yang disediakan dalam dokumentasi tidak semestinya perlu ada dalam createApp 中定义的实例上完成。它适用于任何组件，只要您在 main 上实例化了 i18n。(js|ts)

Ini berfungsi untuk mana-mana komponen (apa sahaja yang anda perlukan 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