如何在 i18n + Vue 3 中使用货币格式？

Question

我有 {{n (100, "currency")}} 并且我想将其显示为 $100 - 但我怎样才能正确获得 n？例如，当我使用

import { useI18n } from "vue-i18n";

 setup() {
    const { t, n } = useI18n({
      locale: "en-US",

      numberFormats: {
        "en-US": {
          currency: {
            style: "currency",
            currency: "USD",
          },
        },
      },
    });

    return { t, n };
  },

我得到一个错误Uncaught (in promise) SyntaxError: Invalid arguments我该如何解决这个问题

Answer 1

VueI18n 必须是 initialized 第一，使用 createI18n 和 app.use()
要使用组合 API，legacy: false must be used

参见下面的示例。请注意，示例中使用 VueI18n.createI18n 或 Vue.createApp 是因为脚本是从 CDN 加载的。与bundler一起使用时，只需使用import并直接使用createApp或createI18n...

const i18n = VueI18n.createI18n({
  legacy: false,
  locale: "en-US",
  numberFormats: {
    "en-US": {
      currency: {
        style: "currency",
        currency: "USD",
      },
    },
  },
})

const app = Vue.createApp({
  setup() {
    const { n } = VueI18n.useI18n()
    return { n }
  }
})
app.use(i18n)
app.mount("#app")

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-i18n@next"></script>
<div id="app">
  {{ n(100, "currency") }}
</div>

如何在 i18n + Vue 3 中使用货币格式？

How to use currency formatting at i18n + Vue 3?

vue.js

vue-i18n

vuejs3