Vue3中如何无需getCurrentInstance访问全局属性$configuration？

方法一：使用Provide/Inject（Vue官方推荐） #

这种方式是Vue3推荐的全局共享状态方案，无需依赖getCurrentInstance，还能轻松添加类型提示。

步骤1：在入口文件中提供配置 #

修改main.ts，将获取到的配置通过app.provide提供给整个应用：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from '@/App.vue'
import router from '@/infrastructure/router'
import vuetify from '@plugins/vuetify'
import configurator from '@plugins/configurator'

// 先定义配置的类型结构，解决类型提示问题
interface AppConfiguration {
  // 根据你的实际配置项定义属性
  apiBaseUrl: string;
  appName: string;
  // ...其他配置字段
}

const app = createApp(App)

await configurator
    .getConfig()
    .then((response: AppConfiguration) => {
        // 用provide传递配置，键名可自定义
        app.provide('configuration', response)
    })
    .catch((error) => console.error(error))

app.use(createPinia())
app.use(router)
app.use(vuetify)
app.mount('#app')

步骤2：在组件中注入配置 #

任意组件内通过inject获取配置，同时指定类型：

<script setup lang="ts">
import { inject } from 'vue'
import type { AppConfiguration } from '@/main'

// 注入配置并声明类型
const configuration = inject<AppConfiguration>('configuration')

// 此时使用configuration会有完整的类型提示
console.log(configuration?.apiBaseUrl)
</script>

方法二：将配置导出为独立模块 #

如果配置是初始化后不再变更的静态数据，可以把它存到独立模块中，其他组件直接导入使用，这种方式最简洁。

步骤1：创建配置模块（如@/utils/appConfig.ts） #

// 定义配置类型
export interface AppConfiguration {
  apiBaseUrl: string;
  appName: string;
  // ...其他配置字段
}

// 声明配置变量
export let appConfiguration: AppConfiguration | null = null

// 导出设置配置的方法
export function setAppConfig(config: AppConfiguration) {
  appConfiguration = config
}

步骤2：在入口文件中设置配置 #

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from '@/App.vue'
import router from '@/infrastructure/router'
import vuetify from '@plugins/vuetify'
import configurator from '@plugins/configurator'
import { setAppConfig, type AppConfiguration } from '@/utils/appConfig'

const app = createApp(App)

await configurator
    .getConfig()
    .then((response: AppConfiguration) => {
        setAppConfig(response)
    })
    .catch((error) => console.error(error))

app.use(createPinia())
app.use(router)
app.use(vuetify)
app.mount('#app')

步骤3：在组件中直接导入使用 #

<script setup lang="ts">
import { appConfiguration } from '@/utils/appConfig'

// 使用前可先判断配置是否已加载完成
if (appConfiguration) {
  console.log(appConfiguration.apiBaseUrl)
}
</script>

补充：类型提示的核心解决思路 #

无论采用哪种方法，提前用TypeScript接口定义配置的结构是解决类型提示缺失的关键，避免使用any类型，这样在组件中使用时就能获得完整的代码补全和类型检查。

内容的提问来源于stack exchange，提问作者Juan Pablo Spiatta