如何使用 PrimeVue i18n 集成？

Question

賞金將在 1 小時后到期。 此問題的答案有資格獲得+100聲望賞金。 Question3r正在尋找一個規范的答案。

我使用 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); 是錯的。
• 如何全局更改當前選定的語言環境？

Answer 1

入門

區域設置值存儲在安裝 PrimeVue 后可訪問的全局配置中。

import {createApp} from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);

app.use(PrimeVue);

使用function 的第二個參數可用於在 PrimeVue 安裝期間啟動語言環境。

app.use(PrimeVue, {
    locale: {
        accept: 'Aceptar',
        reject: 'Rechazar',
        //...
    }
});

語言環境配置是反應式的，因此任何更改都會立即反映在 UI 中。 假設您正在做一個多語言應用程序並且需要動態更改語言。

export default {
    methods: {
        changeToSpanish() {
            this.$primevue.config.locale.accept = 'Aceptar';
            this.$primevue.config.locale.reject = 'Rechazar';
        }
    }
}

組成 API

import { defineComponent, onMounted } from "vue";
import { usePrimeVue } from "primevue/config";

export default defineComponent({
    setup() {
        const changeToSpanish = () => {
            const primevue = usePrimeVue();
            primevue.config.locale.accept = 'Aceptar';
            primevue.config.locale.reject = 'Rechazar';
        }

        onMounted(() => {
             changeToSpanish();
        })
    }
});

語言環境選項

locale: {
    startsWith: 'Starts with',
    contains: 'Contains',
    notContains: 'Not contains',
    endsWith: 'Ends with',
    equals: 'Equals',
    notEquals: 'Not equals',
    noFilter: 'No Filter',
    lt: 'Less than',
    lte: 'Less than or equal to',
    gt: 'Greater than',
    gte: 'Greater than or equal to',
    dateIs: 'Date is',
    dateIsNot: 'Date is not',
    dateBefore: 'Date is before',
    dateAfter: 'Date is after',
    clear: 'Clear',
    apply: 'Apply',
    matchAll: 'Match All',
    matchAny: 'Match Any',
    addRule: 'Add Rule',
    removeRule: 'Remove Rule',
    accept: 'Yes',
    reject: 'No',
    choose: 'Choose',
}

Answer 2

根據您鏈接的文檔， .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 s。

有沒有類似於 vue-i18n 的東西來訪問正確的翻譯？

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

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

如何全局更改當前選定的語言環境？

我建議您使用商店（通常是 Vuex）來實現這一點。

這個想法是，當您切換到另一個語言環境時，商店將負責更新primevue.config.locale ，因此您的整個應用程序將更新其消息。