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