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 包装变量。