Vue3 设置全局变量

方式一：

main.js 设置全局变量。

import api from '@/api'

app.config.globalProperties.$api = api

使用全局变量，使用 getCurrentInstance 方法。

// ctx.$api 就是全局设置的变量

const {

proxy: { $api },

} = getCurrentInstance();

// ctx.$api 就是全局设置的变量

const { ctx } = getCurrentInstance();

方式二：

vue3新的 provide/inject 功能可以穿透多层组件，实现数据从父组件传递到子组件。

可以将全局变量放在根组件的 provide 中，这样所有的组件都能使用到这个变量。

如果需要变量是响应式的，就需要在 provide 的时候使用 ref 或者 reactive 包装变量。