如何使用PrimeVue i18n集成？
如何使用PrimeVue i18n集成？
提问于 2022-01-06 14:57:25
我使用CLI创建了一个Vue 3应用程序，并将PrimeVue添加到我的项目中。基于文档，我希望设置区域设置。
在main.ts文件中，我尝试用多种语言设置一个示例
.use(PrimeVue, {
locale: {
en: {
message: "Message",
},
ja: {
message: "メッセージ",
},
de: {
message: "Nachricht",
},
},
})这是一个尝试基于所选区域设置使用message的示例组件
<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>我的整个代码是伪代码，因为我还不知道正确的语法。我正努力解决多个问题：
- 如何配置后备区域设置？
- 是否有类似于vue-i18n的东西来访问
message(例如{{ $t('message') }})的正确翻译？这个const message = ref(primevue.config.currentLocale.message);是错的。 - 如何在全球范围内更改当前选定的区域设置？
回答 1
Stack Overflow用户
发布于 2022-01-15 00:54:25
根据您链接的文档，在.use(PrimeVue, {})中每个区域没有嵌套。
因此，您必须将默认值声明为：
.use(PrimeVue, {
locale: {
emptyFilterMessage: 'There is no records',
}
}现在，当您想切换区域设置时，您必须覆盖文档中所述的每个区域设置：
const primevue = usePrimeVue();
primevue.config.locale.emptyFilterMessage = 'I wish there were some records';如何配置后备区域设置？
似乎没有任何机制来设置后备区域设置。但是您可以模拟这种情况，实际上，如果使用Object.assign，您可以得到如下内容：
primevue.config.locale = Object.assign(
{},
en, // fallback, an object like { emptyFilterMessage: 'Empty', emptyMessage: 'empty...' }
de, // locale, an object like { emptyFilterMessage: 'Leer' }
);注意：en和de可能是import的结果。
是否有类似于vue-i18n的东西来访问正确的翻译？
您可以在模板中直接使用primevue.config.locale.<key>，例如：
<template>
<p>{{ primevue.config.locale.emptyFilterMessage }}</p>
</template>如何在全球范围内更改当前选定的区域设置？
为了实现这一点，我建议您使用商店 (通常是Vuex)。
这个想法是当你切换到另一个地区时，商店将负责更新primevue.config.locale，所以你的整个应用程序都会更新它的消息。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70609065
复制相关文章
相似问题
腾讯云开发者
