vuejs3 I18n 和组合 API
P粉014218124
P粉014218124 2024-03-25 15:10:14
0
1
602

我现在正在使用 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 (获取一些信息并管理我的语言切换)

预先感谢您提供的帮助。

P粉014218124
P粉014218124

全部回复(1)
P粉237647645

您已经在应用程序上的 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
})
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板