如何为我的多组件 Vue 3/Vuetify 3 应用程序中的每个组件提供一个常量？

Question

我有一个用 Vue 3 和 Vuetify 3 编写的应用程序。它有多个组件，所有组件都显示货币金额。我希望货币金额以适合应用程序运行的区域设置的格式显示，以便在美国显示为 1,234.56 美元，在使用该格式的国家/地区显示为 1,234,56 加货币符号。

我已经有了代码来确定区域设置和货币金额的正确格式，并且工作正常。该代码基本上查找区域设置，确定国家/地区代码，找到“alpha3code”，然后格式化金额。这段代码本质上是计算一些常量，这些常量对于应用程序中的每个组件都具有完全相同的值，因此为每个不同的组件执行此代码似乎是多余且低效的。

我对 Vue/Vuetify 还比较陌生，所以我希望有某种方法可以一次性执行此代码，然后与每个组件共享找到的信息，但我不确定那是什么。

任何人都可以建议一种或多种方法来做我想做的事吗？

Answer 1

您可以为常用功能创建一个文件 并导出这些函数

1. 创建一个具有任意名称的通用函数文件，比如 commonFunctions commonFunctions.js

   导出常量convertAmount = (val) => { //这里是你的逻辑 返回parseFloat(val) }

2. 在main.js中导入并使用常用函数

从'@/views/static/commonFunctions'导入*作为COMMON_METHODS；

const app = createApp(App); app.config.globalProperties.COMMON = COMMON_METHODS;

3. 您可以在任何组件中访问该方法

   this.COMMON.convertAmount(值)