vue3配置全局变量

在Vue 3中，有两种方式可以配置全局变量。

方式一是在main.js中使用provide/inject功能。你可以将全局变量定义在根组件的provide中，这样所有的子组件都可以通过inject来获取全局变量。如果需要全局变量是响应式的，可以使用ref或者reactive包装变量。例如：

// main.js

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

const app = createApp(App);

const systemId = ref('10'); // 定义全局变量并使用ref包装
app.provide('systemId', systemId); // 将全局变量提供给子组件

app.mount('#app');

然后，在子组件中使用inject来获取全局变量：

// 子组件中

import { inject } from 'vue';

export default {
  setup() {
    const systemId = inject('systemId'); // 获取全局变量

    // 使用全局变量
    console.log(systemId.value);

    return { systemId };
  }
}

方式二是使用getCurrentInstance方法来获取全局变量。在Vue 3中，你可以使用getCurrentInstance来获取当前组件实例，然后通过ctx.$xxx来访问全局变量。例如：

// 子组件中

import { getCurrentInstance } from 'vue';

export default {
  setup() {
    const { ctx } = getCurrentInstance();

    // 使用全局变量
    console.log(ctx.$systemId);

    return { ctx };
  }
}

这样就可以在Vue 3中配置全局变量了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Vue3中怎么设置全局变量](https://blog.csdn.net/Clover_zlx/article/details/129598239)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [Vue3 设置全局变量](https://blog.csdn.net/zhangdaiscott/article/details/131245216)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]