Ich verwende derzeit vueJS, um eine Front-End-Schnittstelle zu erstellen, und verwende derzeit vuejs 3 und i18n. Die i18n-Implementierung funktioniert normal einwandfrei, aber wenn ich sie mit der Kompositions-API verwenden m?chte, treten Probleme auf.
Also, was habe ich getan? Mein main.js sieht so aus:
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')
Ich habe in der Dokumentation gesehen, dass ich Legacy:false hinzufügen musste, um die Kompositions-API zu verwenden, also habe ich das getan. Dann funktioniert mein $t nicht mehr. Ich schaute weiter in die Dokumentation und gelangte zu der Stelle, an der ich mich verlaufen hatte. In der Dokumentation hei?t es, Folgendes zu verwenden:
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`
}
})
Mein Problem ist, dass meine createApp bereits so verwendet wird:
const app = createApp(App)
Dies ist die Standardimplementierung von Vuejs. Ich habe versucht, es zu ?ndern, Einstellungen nach der App hinzuzufügen, und das L?schen der App hatte keine Auswirkung, und ich glaube, ich mache immer mehr dumme Dinge.
Wei? jemand, wie man i18n mit der Kompositions-API zum Laufen bringt? Das Endziel besteht im Wesentlichen darin, die mit der Kompositions-API erstellte Komponente ?switchLanguage“ zu verwenden, um auf $i18n zuzugreifen (einige Informationen abzurufen und meinen Sprachwechsel zu verwalten)
Vielen Dank im Voraus für jede Hilfe.
1
0
0
您已經(jīng)在應(yīng)用程序上的 main.js 中實(shí)例化了 i18n。這是重要的一點(diǎn)。
文檔中提供的示例不一定必須在 createApp 中定義的實(shí)例上完成。它適用于任何組件，只要您在 main 上實(shí)例化了 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 :
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 (復(fù)數(shù)化 ) 功能已移至 t。
如果您要升級現(xiàn)有應(yīng)用程序，并且不想通過模板并將 $t 和 $tc 的所有實(shí)例替換為 t：
setup: () => ({
$t: useI18n().t
$tc: useI18n().t
})
要使 $t 和 $tc 在任何組件的 <template> 中可用，而不必在 <script> （或 <script setup>）中導(dǎo)入和公開它們：
import App from './App.vue'
import { useI18n } from 'vue-i18n'
const app = createApp(App);
app.config.globalProperties.$t = useI18n().t
<script> 中仍然需要它們，請從 'vue-i18n' 導(dǎo)入，如上所示。$tc 在 Vue3 中不再使用。如果您的模板來自 Vue2，最好將所有 $tc 替換為 $t?；蛘?，如果您不想觸及模板，您可以將 useI18n().t 分配給兩者：Object.assign(app.config.globalProperties, {
$t: useI18n().t,
$tc: useI18n().t
})
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
