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