如何在vue组件之外访问vue 3中的全局变量？

Question

我在 main.js 文件中定义了全局变量，如下所示

---

const app = Vue.createApp({})
   app.config.globalProperties.$myGlobalVariable = globalVariable***

然后当我尝试在其他js文件中访问这个变量$myGlobalVariable时，它是未定义的，但我可以在vue组件中访问。

在 vue 2 中，可以在 js 文件和 vue 组件中访问。我希望你能帮助我:)

Answer 1

为了访问 Vue 组件外部的全局 Vue 变量，您必须：

1。导出应用实例

/* main.js */

export const app = Vue.createApp({})
app.config.globalProperties.$myGlobalVariable = globalVariable

2。在另一个JS文件中导入app实例

/* other.js */

import { app } from '@/main.js'
console.log(app.config.globalProperties.$myGlobalVariable)

Answer 2

这对我有用

1。导出全局属性

/* main.js */
const app = createApp(App)

const { globalProperties } = app.config
globalProperties.foo = 'FOO'
globalProperties.bar = () => console.log('BAR')

app.mount('#app')
export default globalProperties

2。在另一个JS文件中导入全局属性

/* other.js */
import globalProperties from '@/main'

console.log('foo', globalProperties.foo)
globalProperties.bar()