vue3中设置一个全局变量

在应用的根组件APP.vue中使用provide函数提供全局变量，然后在子组件中使用inject函数来注入全局变量。

// 根组件app.vue
import { provide } from 'vue';

export default {
  setup() {
    const globalVar = '全局变量';
    provide('globalVar', globalVar);
  }
}

// 子组件
import { inject } from 'vue';

export default {
  setup() {
    const globalVar = inject('globalVar');
    // 使用 globalVar
  }
}

使用 globalProperties

在应用的实例上使用globalProperties添加全局属性。

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

const app = createApp(App);
app.config.globalProperties.$globalVar = '全局变量';
app.mount('#app');

// 任何组件内
export default {
  mounted() {
    console.log(this.$globalVar); // 输出：全局变量
  }
}

使用外部 JavaScript 模块

将全局变量定义在外部模块中，然后在需要的地方导入模块。

/ global.js
export const globalVar = '全局变量';

// 组件内
import { globalVar } from './global.js';

export default {
  mounted() {
    console.log(globalVar); // 输出：全局变量
  }
}

选择哪种方式取决于具体场景和项目结构。通常推荐使用provide和inject或者globalProperties，因为这些方法更符合Vue 3的响应式和组合式API的原则。