如何在Vue3的js文件中使用全局变量

Question

我在Vue3项目中定义了一些全局变量，例如：

 app.config.globalproperties.$locale = locale

然后，可组合性被创建出来，以动态地返回全局变量：

import { getCurrentInstance ) from 'vue'
export function useGlobals(type) {
  const app = getCurrentInstance()
  const global = app.appContext.config.globalProperties[`$${type}`]
  return { global }
}

然后在Vue组件中导入并执行composable：

import { useGlobals } from '../path'
const { global } = useGlobals('locale')

现在，全局变量可以使用。

但是，当我在 js 文件中导入可组合时，问题就出现了，appContext 在那里是未定义的。

我的问题是，我们是否有办法在 js 文件中获取全局变量或 appContext？

- Nikola Pavicevic

---

你尝试过在 main.js 中使用 export const { appContext } = app 吗？应该可以工作。 - tao

Answer 1

感谢@tao的好建议（顺便说一下，从应用程序获取appContext是不可能的，但这给了我一个想法：）问题已解决。

在创建应用程序后，我在中创建了另一个导出项，其中包括所有全局属性。

const globals = app.config.globalProperties
export { globals }

或者作为一个函数（@tao的另一个建议）：

export const useGlobals = () => app.config.globalProperties

现在我们可以在任何js文件中导入全局变量并像这样使用它：

import { globals } from '../path/to/main.js'
globals.$locale

或者从函数中：

import { useGlobals } from '../path/to/main.js'
const { $locale } = useGlobals()

- Nikola Pavicevic

---

你说得对。在app上没有appContext。个人而言，我会使用一个函数：export const useAppConfig = () => app.config。然后使用它作为 const { globalProperties } = useAppConfig()。这样，当你调用该函数时，你可以确保获取到globalProperties的内容，而不是在导出配置时获取。在大多数情况下，globalProperties在应用程序挂载后不会更改，但如果动态添加插件，则无法获取到由其添加的全局属性，因为config早已被导出。有道理吗？ - tao

@tao 是的，是的，这很有道理。再次感谢！在我的情况下，全局变量是在应用程序挂载时创建的，没有额外的变量。但将其导出为函数更好。我会切换到它，干杯 :) - Nikola Pavicevic

有趣的解决方案，所以我在这里假设 ../path 是指向你的 main.js 文件的路径？如果是这样，请更新你的信息以反映这一点，并消除那些没有完整上下文的人的困惑。@NikolaPavicevic - qodeninja

Answer 2

我尝试了@nikola-pavicevic提出的答案，但它导致了无限递归的负面影响。例如，每次导入globals时，它都必须运行整个main.js，这意味着再次初始化和挂载应用程序。在生产环境中，应用程序大部分时间似乎工作正常，但在我的Jest单元测试中，递归导致了许多问题。

为了解决这个问题，我创建了一个GlobalVariableHolder.js文件，它只包含以下内容：

const GlobalVariables = {};
export default GlobalVariables;

然后，在main.js中，我可以这样导入它：

import GlobalVariables from "./GlobalVariableHolder";

然后分配变量：

// This line expects that you first assigned the variables to app.config.globalProperties.
GlobalVariables.variables = app.config.globalProperties;

然后，在你需要它们的JS文件中，你的导入代码与之前一样：

import GlobalVariables from "./GlobalVariableHolder";

你可以像这样访问app.config.globalProperties中的所有内容：

GlobalVariables.variables.$thisIsAMethod(parameter);

这样，每次导入GlobalVariableHolder时，不会每次都启动一个新的Vue实例。

- Nelson

Answer 3

不必创建可组合以获取全局属性，而可以使用provide/inject机制。

在此处查看文档: https://vuejs.org/api/composition-api-dependency-injection.html#provide

- Mossaab

---

嘿伙计，我知道提供/注入功能。但那只在vue文件中起作用，而不是在js文件中。无论如何，还是谢谢你的帮助。干杯 :) - Nikola Pavicevic

@NikolaPavicevic 但是你的解决方案使用了 getCurrentInstance()，这个方法只能在 Vue 组件实例的上下文中使用（而不能在任何 .js 文件中使用）。 - tony19

@tony19 嘿，伙计，你是对的，但我在问题中说了它在js文件中不起作用 :) 但是感谢tao评论提供的解决方案，不需要使用getCurrentInstance()。在js文件中，我只需要新导出的变量，而不需要可组合的。 - Nikola Pavicevic