Vue3 设置全局变量

问题

在 Vue3 中如何设置全局变量？

解答

方法一：config.globalProperties

Vue2 中使用 Vue.prototype.$xxx 挂载全局变量，在 Vue3 中改为使用 config.globalProperties。

// Vue 2.x
Vue.prototype.$http = () => {}

// Vue 3.x
const app = createApp({})
app.config.globalProperties.$http = () => {}

挂载后，可以在组件中通过 this.$http 访问。

方法二：Provide / Inject

使用 provide/inject 可以实现跨层级组件的数据传递。在根组件中 provide 全局变量，所有子组件都可以通过 inject 获取。

// 根组件
import { provide, ref } from 'vue'

export default {
  setup() {
    const globalVar = ref('global value')
    provide('globalVar', globalVar)
  }
}

// 子组件
import { inject } from 'vue'

export default {
  setup() {
    const globalVar = inject('globalVar')
    return { globalVar }
  }
}

如果需要响应式变量，使用 ref 或 reactive 包装。

关键点

• globalProperties 适合挂载方法和工具函数，通过 this.$xxx 访问
• provide/inject 适合跨层级传递数据，支持响应式
• 响应式全局变量需要用 ref 或 reactive 包装
• provide/inject 可以穿透多层组件，无需逐层传递 props