Vue3中如何在JS文件中获取全局变量或appContext？

getCurrentInstance() 仅能在Vue组件的setup函数、生命周期钩子，或是被组件调用的组合式函数中生效——它依赖当前组件的实例上下文。普通JS文件不在该上下文范围内，因此调用时会返回undefined，自然无法获取appContext。

以下是几种可行的解决方案：

方案一：单独维护全局变量模块（推荐） #

将需要全局共享的变量抽成独立模块，组件和JS文件直接从该模块导入，彻底摆脱对Vue app实例的依赖。

1. 创建全局变量模块：

// src/utils/globalVars.js
// 初始化全局变量
export let $locale = null;

2. 在main.js中完成赋值：

import { createApp } from 'vue'
import App from './App.vue'
import { $locale } from './utils/globalVars'

const app = createApp(App)
// 示例locale对象
const locale = {
  lang: 'zh-CN',
  messages: { hello: '你好' }
}

// 给模块变量赋值
$locale = locale
// 同时挂载到globalProperties，保留组件原有用法
app.config.globalProperties.$locale = locale

app.mount('#app')

3. 在普通JS文件中直接使用：

// src/utils/someJsFile.js
import { $locale } from './globalVars'

console.log($locale.lang) // 输出 'zh-CN'

组件内仍可沿用原有的useGlobals，或直接导入模块变量，灵活度更高。

方案二：保存app实例供全局访问 #

若需要访问完整的app上下文（比如不止globalProperties，还要调用app的其他API），可将创建好的app实例存入模块，供JS文件导入使用。

1. 创建app实例存储模块：

// src/utils/appInstance.js
export let appInstance = null;

2. 在main.js中保存实例：

import { createApp } from 'vue'
import App from './App.vue'
import { appInstance } from './utils/appInstance'

const app = createApp(App)
appInstance = app

const locale = { /* 你的locale对象 */ }
app.config.globalProperties.$locale = locale

app.mount('#app')

3. 在普通JS文件中获取全局变量：

// src/utils/someJsFile.js
import { appInstance } from './appInstance'

if (appInstance) {
  const $locale = appInstance.config.globalProperties.$locale
  console.log($locale)
}

注意：需确保JS文件在app实例初始化完成后再导入，避免appInstance仍为null。

方案三：改进组合式函数（兼容组件与JS文件） #

若要复用组合式函数的逻辑，可修改函数允许手动传入app实例，同时保留组件内的自动获取逻辑：

import { getCurrentInstance } from 'vue'

export function useGlobals(type, appInstance = null) {
  // 优先使用传入的app实例，无传入则尝试获取当前组件实例的app
  const app = appInstance || getCurrentInstance()?.appContext?.app
  const global = app?.config.globalProperties[`$${type}`]
  return { global }
}

组件内正常调用：

const { global } = useGlobals('locale')

JS文件内调用时传入保存的app实例：

import { useGlobals } from './useGlobals'
import { appInstance } from './appInstance'

const { global: $locale } = useGlobals('locale', appInstance)

这种方式适合需要复用组合式逻辑的场景，但相对前两种方案稍显繁琐。

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