如何使用 PrimeVue i18n 集成？

Question

我使用 CLI 创建了一个 Vue 3 应用程序，并将 PrimeVue 添加到我的项目中。根据文档我想设置区域设置。

\n

在main.ts文件中，我尝试设置一个具有多种语言的示例

\n

  .use(PrimeVue, {\n    locale: {\n      en: {\n        message: "Message",\n      },\n      ja: {\n        message: "\xe3\x83\xa1\xe3\x83\x83\xe3\x82\xbb\xe3\x83\xbc\xe3\x82\xb8",\n      },\n      de: {\n        message: "Nachricht",\n      },\n    },\n  })\n

\n

这是一个尝试根据message所选语言环境使用的示例组件

\n

<template>\n  <div>\n    <p>{{ message }}</p>\n    <button @click="setCurrentLocaleToJapanese">Change to japanese</button>\n  </div>  \n</template>\n\n<script lang="ts">\nimport { defineComponent, ref } from "vue";\nimport { usePrimeVue } from "primevue/config";\n\nexport default defineComponent({\n  setup() {\n    const primevue = usePrimeVue();\n\n    const message = ref(primevue.config.currentLocale.message); // reactive, fallback locale?\n\n    function setCurrentLocaleToJapanese() {\n      primevue.config.currentLocale = "ja";\n    }\n\n    return { message };\n  },\n});\n</script>\n

\n

我的整个代码是伪代码，因为我还不知道正确的语法。我正在努力解决多个问题：

\n

\n
• 如何配置后备区域设置？
\n
• 是否有类似于 vue-i18n 的东西来访问例如的正确message翻译{{ $t(\'message\') }}？这const message = ref(primevue.config.currentLocale.message);是错误的。
\n
• 如何全局更改当前选定的区域设置？
\n

\n

Answer 1

根据您链接的文档.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你可以得到类似的东西：

const primevue = usePrimeVue();
primevue.config.locale.emptyFilterMessage = 'I wish there were some records';

注意：en和de可以由 s 得出import。

有没有类似于 vue-i18n 的东西来访问正确的翻译？

您可以primevue.config.locale.<key>直接在您的模板中使用，例如：

primevue.config.locale = Object.assign(
  {},
  en, // fallback, an object like { emptyFilterMessage: 'Empty', emptyMessage: 'empty...' }
  de, // locale, an object like { emptyFilterMessage: 'Leer' }
);

如何全局更改当前选定的区域设置？

我建议你使用商店（通常是 Vuex）来实现这一点。

这个想法是，当您切换到另一个区域设置时，商店将负责更新primevue.config.locale，因此您的整个应用程序将更新其消息。