Creé una aplicación Vue 3 usando la CLI y agregué PrimeVue a mi proyecto. Según los documentos , quiero configurar los locales.
Dentro del archivo main.ts intenté configurar una muestra con varios idiomas
.use(PrimeVue, { locale: { en: { message: "Message", }, ja: { message: "メッセージ", }, de: { message: "Nachricht", }, }, }) y este es un componente de muestra que intenta trabajar con message basado en la configuración regional seleccionada
<template> <div> <p>{{ message }}</p> <button @click="setCurrentLocaleToJapanese">Change to japanese</button> </div> </template> <script lang="ts"> import { defineComponent, ref } from "vue"; import { usePrimeVue } from "primevue/config"; export default defineComponent({ setup() { const primevue = usePrimeVue(); const message = ref(primevue.config.currentLocale.message); // reactive, fallback locale? function setCurrentLocaleToJapanese() { primevue.config.currentLocale = "ja"; } return { message }; }, }); </script>Todo mi código es pseudocódigo porque aún no conozco la sintaxis correcta. Estoy luchando con varios problemas:
message por ejemplo, {{ $t('message') }} ? Este const message = ref(primevue.config.currentLocale.message); Está Mal.De acuerdo con la documentación que vinculó, no hay anidamiento por configuración regional en .use(PrimeVue, {}) .
Por lo tanto, debe declarar sus valores predeterminados como:
.use(PrimeVue, { locale: { emptyFilterMessage: 'There is no records', } }Ahora, cuando desee cambiar la configuración regional, debe anular todas las configuraciones regionales como se indica en la documentación:
const primevue = usePrimeVue(); primevue.config.locale.emptyFilterMessage = 'I wish there were some records';¿Cómo configurar una configuración regional alternativa?
No parece haber ningún mecanismo para tener una configuración regional alternativa. Pero puedes simular esto, de hecho, si usas Object.assign puedes tener algo como:
primevue.config.locale = Object.assign( {}, en, // fallback, an object like { emptyFilterMessage: 'Empty', emptyMessage: 'empty...' } de, // locale, an object like { emptyFilterMessage: 'Leer' } ); Nota: El en y de podrían resultar de import s.
¿Hay algo similar a vue-i18n para acceder a la traducción correcta?
Puede usar primevue.config.locale.<key> directamente en su plantilla, como:
<template> <p>{{ primevue.config.locale.emptyFilterMessage }}</p> </template>¿Cómo cambiar globalmente la configuración regional actual seleccionada?
Le aconsejaría que use una tienda (generalmente Vuex) para lograr esto.
La idea es que cuando cambie a otra configuración regional, la tienda será responsable de actualizar primevue.config.locale , por lo que toda su aplicación actualizará sus mensajes.