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 

Nota sampingan: Semua $tc (plural kefungsian ization ) telah dialihkan ke $tc (复数化 ) 功能已移至 t.

Jika anda sedang menaik taraf aplikasi sedia ada dan tidak mahu melalui templat dan menggantikan semua kejadian $t dan $tc dengan $t 和 $tc 的所有实例替换为 t:

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

---

Untuk mengimport dan mendedahkannya dalam $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

• Jika anda mengimport masuk <script> 中仍然需要它们，请从 'vue-i18n' seperti yang ditunjukkan di atas.
• $tc 在 Vue3 中不再使用。如果您的模板来自 Vue2，最好将所有 $tc 替换为 $t。或者，如果您不想触及模板，您可以将 useI18n().t Ditugaskan kepada kedua-duanya:

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