vuejs3 I18n 和组合 API

我现在正在 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 （以获取一些信息并管理我的语言切换）

预先感谢您提供的帮助。

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

文档中提供的示例不一定必须在内部定义的实例上完成createApp。它可以在任何组件中工作，只要你已经实例化了 i18nmain.(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 <template>:
      t, 
    }
  },
  // if you want it inside any method, computed or hook
  // in case you still use Options API
  computed() {
    someTranslatedText() {
      return useI18n().t('translate.me');
    }
  },
  methods: {
    methodNeedingTranslation() {
      const { t } = useI18n();
      // do stuff with `t`
    }
  }
})

旁注：全部$tc (多元化) 功能已移至t.

如果您要升级现有应用程序并且不想遍历模板并替换所有实例$t and $tc with t:

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

To make $t and $tc可在任何组件中使用<template>，无需导入+暴露它们<script> (or <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'，如上图所示。
• $tcVue3 中不再使用。如果你的模板来自Vue2，最好替换所有$tc's with $t。或者你可以分配useI18n().t对于两者，如果您不想触摸模板：

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