如何让常量在Vue 3/Vuetify 3多组件应用中全局可用？

针对Vue 3 + Vuetify 3的多组件共享金额格式化逻辑需求，推荐以下三种高效实现方式，确保代码仅执行一次、全局复用：

1. 使用Vue 3 Provide/Inject机制（官方推荐跨组件共享方案） #

在根组件中一次性执行locale识别与格式化逻辑，通过provide暴露给所有子组件，子组件用inject直接取用。

根组件（App.vue）示例 #

<script setup>
import { provide } from 'vue'

// 仅执行一次的locale与格式化逻辑
const userLocale = navigator.language || 'en-US'
const alpha3Code = /* 你的alpha3code获取逻辑 */
const formatCurrency = (amount) => {
  return new Intl.NumberFormat(userLocale, {
    style: 'currency',
    currency: alpha3Code
  }).format(amount)
}

// 提供全局共享的配置与方法
provide('currencyConfig', {
  locale: userLocale,
  alpha3Code,
  formatCurrency
})
</script>

子组件使用示例 #

<script setup>
import { inject } from 'vue'

const { formatCurrency } = inject('currencyConfig')
</script>

<template>
  <v-card-text>{{ formatCurrency(1234.56) }}</v-card-text>
</template>

2. 封装独立ES模块（最轻量化的复用方式） #

将locale处理逻辑封装成独立JS模块，模块在首次导入时自动执行并缓存结果，后续所有组件导入都会复用缓存值。

工具模块（utils/currencyFormatter.js）示例 #

// 模块加载时仅执行一次，结果自动缓存
const userLocale = navigator.language || 'en-US'
const alpha3Code = /* 你的alpha3code获取逻辑 */

export const formatCurrency = (amount) => {
  return new Intl.NumberFormat(userLocale, {
    style: 'currency',
    currency: alpha3Code
  }).format(amount)
}

export const localeConfig = {
  locale: userLocale,
  alpha3Code
}

组件中导入使用示例 #

<script setup>
import { formatCurrency } from '@/utils/currencyFormatter'
</script>

<template>
  <v-chip>{{ formatCurrency(789.12) }}</v-chip>
</template>

3. 挂载到Vue全局属性（兼容传统全局调用习惯） #

在项目入口文件main.js中执行一次逻辑，将格式化方法挂载到Vue全局属性，所有组件可直接通过全局属性访问。

入口文件（main.js）示例 #

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

// 仅执行一次的locale与格式化逻辑
const userLocale = navigator.language || 'en-US'
const alpha3Code = /* 你的alpha3code获取逻辑 */
const formatCurrency = (amount) => {
  return new Intl.NumberFormat(userLocale, {
    style: 'currency',
    currency: alpha3Code
  }).format(amount)
}

const app = createApp(App)
app.use(vuetify)

// 挂载全局属性
app.config.globalProperties.$formatCurrency = formatCurrency
app.config.globalProperties.$localeConfig = { locale: userLocale, alpha3Code }

app.mount('#app')

组件中使用示例（组合式API） #

<script setup>
import { getCurrentInstance } from 'vue'

const app = getCurrentInstance()
const formatCurrency = app.appContext.config.globalProperties.$formatCurrency
</script>

<template>
  <v-btn>{{ formatCurrency(456.78) }}</v-btn>
</template>

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