Vue中如何在组合式函数内使用provide提供的全局信息？

方法一：维护独立的全局配置模块 #

如果你的全局状态（比如apiUrl、全局state）需要跨组件和工具函数共享，可以单独创建一个模块来统一维护，同时在provide中复用该模块的值，这样就能在任意代码位置直接导入使用，无需依赖inject。

示例代码：

// src/utils/globalConfig.js
export const globalConfig = {
  apiUrl: 'http://localhost:3000',
  state: { /* 你的全局状态对象 */ }
}

在main.js中复用这个模块完成provide：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { globalConfig } from './utils/globalConfig'

createApp(App)
  .use(router)
  .provide('state', globalConfig.state)
  .provide('apiUrl', globalConfig.apiUrl)
  .mount('#app')

之后在组合式函数或任意工具代码中直接导入使用：

import { globalConfig } from './utils/globalConfig'

export const fetchApi = () => {
  fetch(`${globalConfig.apiUrl}/whatever`, { /* 请求配置 */ })
}

这种方式简单直接，能保证provide的值和外部使用的值完全一致，适合静态配置或全局响应式状态的场景。

方法二：在组合式函数内部使用inject #

如果需要保留依赖注入的灵活性（比如允许子组件覆盖上层provide的值），可以将inject调用放在组合式函数内部，确保它在组件setup执行时被调用（此时组件上下文已存在）。

示例代码：

import { inject } from 'vue'

export const useFetchApi = () => {
  // 此处调用inject时，处于组件setup的上下文环境中
  const apiUrl = inject('apiUrl')
  const state = inject('state')

  const fetchApi = () => {
    fetch(`${apiUrl}/whatever`, { /* 请求配置 */ })
  }

  return { fetchApi }
}

在组件中使用该组合式函数：

import { useFetchApi } from './composables/useFetchApi'

export default {
  setup() {
    const { fetchApi } = useFetchApi()
    // 调用接口请求函数
    fetchApi()
    return {}
  }
}

这种方式符合Vue组合式API的设计规范，既避免了组件手动传递参数，又保留了依赖注入的特性，适合需要动态覆盖全局值的场景。

为什么直接在setup外调用inject会报错？ #

inject依赖当前组件实例的上下文才能工作，只有在组件的setup函数或函数式组件内部，Vue才会为代码提供有效的组件实例上下文。在这些场景之外调用inject，Vue无法找到对应的上下文，因此会抛出警告。

内容的提问来源于stack exchange，提问作者Fabian