vuejs3 I18n 和組合 API

Question

我現在正在使用 vueJS 做一個前端介面，並且目前正在使用 vuejs 3 和 i18n。 i18n 的實作以正常方式運作得很好，但是當我想將它與組合 API 一起使用時，就會出現問題。

所以我做了什麼。我的 main.js 如下：

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

我在文件中看到要使用組合API，我必須加入legacy:false，所以我這麼做了。然後我的 $t 就不再起作用了。我進一步查看文檔並到達了我迷失的地方。文件說要使用這個：

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

我的問題是我的createApp已經像這樣使用了：

const app = createApp(App)

這是 Vuejs 的預設實作。 我嘗試修改它，在應用程式之後添加設置，之前，刪除應用程式沒有任何效果，我認為我做了越來越多的愚蠢的事情。

有人知道如何讓 i18n 與組合 API 一起運作嗎？最終目標基本上是使用組合 API 製作的元件 switchLanguage 來存取 $i18n （獲取一些資訊並管理我的語言切換）

預先感謝您提供的協助。

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