如何使用 PrimeVue i18n 集成？

Question

我使用 CLI 创建了一个 Vue 3 应用程序并将 PrimeVue 添加到我的项目中。基于docs 我想设置语言环境。

在 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); 是错误的。
• 如何全局更改当前选定的语言环境？

Answer 1

根据您链接的documentation，.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 可能来自 imports。

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

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

<template>
  <p>{{ primevue.config.locale.emptyFilterMessage }}</p>
</template>

如何全局更改当前选定的语言环境？

我建议您使用store（通常是 Vuex）来实现这一点。

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