vue3设置全局变量

// main.js

import { createApp } from 'vue';
import App from './App.vue';

// 创建Vue应用实例
const app = createApp(App);

// 设置全局变量的方式一：使用provide/inject
app.config.globalProperties.$globalVar = 'This is a global variable';

// 或者通过 provide 方法设置全局变量
app.provide('globalVar', 'This is another global variable');

// 挂载应用实例
app.mount('#app');

解释说明：

1. app.config.globalProperties:

   • 通过 app.config.globalProperties 可以直接在 Vue 应用中添加全局属性。这些属性可以在所有的组件中通过 this.$globalVar 访问。

2. app.provide:

   • 使用 provide 方法也可以设置全局变量，不过这种方式通常与 inject 配合使用。在子组件中可以通过 inject 来注入这个全局变量。

3. 挂载应用:

   • 最后，通过 app.mount('#app') 将 Vue 应用挂载到指定的 DOM 元素上。

这样设置后，你可以在任何组件中访问全局变量：

// 在某个组件中
export default {
  name: 'SomeComponent',
  created() {
    console.log(this.$globalVar); // 输出: This is a global variable
    console.log(this.injectedGlobalVar); // 如果使用 inject 注入，则可以这样访问
  }
}