Vue 3+Vuetify 3应用如何识别本地货币并实现全局适配？

针对你提出的三个问题，结合Vue 3和Vuetify 3的特性，给出具体实现方案：

1. 如何识别当前地区（Locale） #

有两种常用方式获取用户当前地区：

• 浏览器自动检测：直接使用原生JS的navigator.language API，它会返回用户浏览器设置的语言/地区代码（如en-US、fr-FR、zh-CN）。
• 结合Vuetify全局配置：初始化Vuetify时，可将默认locale设为浏览器返回值，同时支持用户手动切换并持久化（比如存在localStorage或状态管理工具中）：

// main.js
import { createVuetify } from 'vuetify'

const savedLocale = localStorage.getItem('app-locale') || navigator.language
const vuetify = createVuetify({
  locale: {
    locale: savedLocale,
    fallback: 'en-US', // 检测到的locale不支持时的默认值
  },
})

如果需要用户手动切换locale，可通过Vuetify的useLocale composable实现：

import { useLocale } from 'vuetify'

const { current, change } = useLocale()
// 切换到德语地区
change('de-DE')
localStorage.setItem('app-locale', 'de-DE')

2. 根据地区获取对应货币符号 #

核心依赖浏览器原生的Intl.NumberFormat API，它能根据locale自动处理货币格式。可以封装一个工具函数提取货币符号：

// utils/currency.js
export function getCurrencySymbol(locale) {
  // 定义locale与货币代码的映射表（可根据需求扩展）
  const currencyMap = {
    'en-US': 'USD',
    'fr-FR': 'EUR',
    'zh-CN': 'CNY',
    'de-DE': 'EUR',
    'jp-JP': 'JPY',
  }
  const currencyCode = currencyMap[locale] || 'USD'
  
  // 生成格式化器并提取货币符号
  const formatter = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currencyCode,
    minimumFractionDigits: 0, // 可根据需求调整小数位数
  })
  const formatParts = formatter.formatToParts(1)
  return formatParts.find(part => part.type === 'currency').value
}

调用示例：

getCurrencySymbol('en-US') // 返回 "$"
getCurrencySymbol('fr-FR') // 返回 "€"

3. 让所有组件统一使用本地货币符号 #

推荐三种统一管理的方式，确保所有组件的货币符号一致：

方式1：全局状态管理（结合Pinia） #

用Pinia维护全局locale和货币符号状态，所有组件直接读取：

// stores/app.js
import { defineStore } from 'pinia'
import { getCurrencySymbol } from '@/utils/currency'

export const useAppStore = defineStore('app', {
  state: () => ({
    locale: localStorage.getItem('app-locale') || navigator.language,
  }),
  getters: {
    currencySymbol: (state) => getCurrencySymbol(state.locale),
  },
  actions: {
    setLocale(newLocale) {
      this.locale = newLocale
      localStorage.setItem('app-locale', newLocale)
    },
  },
})

组件中使用：

<template>
  <span>{{ currencySymbol }}{{ price.toFixed(2) }}</span>
</template>

<script setup>
import { useAppStore } from '@/stores/app'
import { computed } from 'vue'

const appStore = useAppStore()
const currencySymbol = computed(() => appStore.currencySymbol)
const price = 99.99
</script>

方式2：全局自定义过滤器 #

在Vue 3中注册全局过滤器，模板中直接调用：

// main.js
import { createApp } from 'vue'
import { getCurrencySymbol } from '@/utils/currency'
import { useLocale } from 'vuetify'

const app = createApp(App)
app.config.globalProperties.$formatCurrency = function(amount) {
  const { current } = useLocale()
  const symbol = getCurrencySymbol(current.value)
  return `${symbol}${amount.toFixed(2)}`
}

模板中使用：

<template>
  <span>{{ price | $formatCurrency }}</span>
</template>

方式3：Vuetify组件动态绑定 #

对于Vuetify自带的表单组件（如v-text-field），可通过动态绑定属性统一设置货币符号：

<template>
  <v-text-field
    v-model="price"
    type="number"
    :prefix="currencySymbol"
    step="0.01"
  />
</template>

<script setup>
import { useLocale } from 'vuetify'
import { computed, ref } from 'vue'
import { getCurrencySymbol } from '@/utils/currency'

const { current } = useLocale()
const currencySymbol = computed(() => getCurrencySymbol(current.value))
const price = ref(99.99)
</script>

内容的提问来源于stack exchange，提问作者Henry