全局属性

app.config.globalProperties

• 声明

main.ts

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 定义全局变量
app.config.globalProperties.$baseUrl = 'https://api.xxx.com'
app.config.globalProperties.$userInfo = { name: '李四' }

app.mount('#app')

• 在选项式API中使用

<script>
export default {
  mounted() {
    console.log(this.$baseUrl)  // https://api.xxx.com
  }
}
</script>

• 在 setup 里需要 getCurrentInstance：

<script setup>
import { getCurrentInstance } from 'vue'

const { appContext } = getCurrentInstance()
const global = appContext.config.globalProperties

console.log(global.$baseUrl) // https://api.xxx.com
</script>

• 模板中使用：

<template>
你好{{$baseUrl}}
</template>

provide/inject

如果是一些需要全局共享的状态，Vue3 推荐使用 provide / inject 或者直接用 Pinia / Vuex。

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.provide('baseUrl', 'https://api.xxx.com')
app.mount('#app')

组件使用：

<script setup>
import { inject } from 'vue'

const baseUrl = inject('baseUrl')
console.log(baseUrl) // https://api.xxx.com
</script>

实践

推荐在模板中经常使用的方法可以使用app.config.globalProperties注册为全局变量。原因：

• 模板中可以直接使用
• script setup中需要获取vue实例才能使用比较麻烦，因此需要经常在setup中使用的变量就没有必要声明为全局变量了