javascript - 如何使用 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';

How to configure a fallback locale?

似乎没有任何机制来拥有后备语言环境。但是你可以模拟这个，事实上如果你使用 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 s。

Is there something similiar to vue-i18n to access the correct translation ?

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

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

How to change the current selected locale globally ?

我建议您使用 store (通常是 Vuex)来实现这一点。
这个想法是，当您切换到另一个语言环境时，商店将负责更新 primevue.config.locale ，因此您的整个应用程序将更新其消息。