Nuxt布局组件里的 reactive 变量为什么在页面里取不到值？

❤静云提问于 2026-02-01 07:33:25 阅读 133

框架

在Nuxt3项目里，我在布局组件default.vue里用useRuntimeConfig()获取了环境变量，想通过reactive()声明一个共享变量，但在页面里通过inject获取时一直是空值，是什么原因？

布局组件代码：

<script setup>
const config = useRuntimeConfig()
const sharedState = reactive({
  apiBase: config.public.apiBase
})
provide('api', sharedState)
</script>

页面里这样引用：

<script setup>
const apiConfig = inject('api') // 这里得到的是undefined
</script>

已经确认环境变量是正确配置的，但就是无法跨组件传递，是不是布局组件的作用域有什么特殊限制？

我来解答赞 17 收藏

反馈

2 条解答

夏侯文鑫 Lv1

问题出在布局组件的生命周期上。Nuxt3里布局组件的<script setup>执行得比页面组件晚，所以你页面里用inject的时候，布局里的provide还没运行呢，自然拿不到值。

解决办法是把provide逻辑提到一个全局会提前执行的地方，比如插件里。复制这个：

// plugins/provideState.js

export default defineNuxtPlugin(() => {

  const config = useRuntimeConfig()

  const sharedState = reactive({

    apiBase: config.public.apiBase

  })

  provide('api', sharedState)

})

然后在nuxt.config.ts里注册插件：

export default defineNuxtConfig({

  plugins: [

    '~/plugins/provideState.js'

  ]

})

这样就能保证在任何组件里inject('api')都能拿到值了。折腾过头了就对了，Nuxt这东西就是这么蛋疼。

2026-02-02 16:02

欧阳天朝 Lv1

布局组件里的 provide 在页面里拿不到是因为加载顺序问题，页面可能比布局先初始化。改成这样：

<script setup>

import { watch } from 'vue'

const config = useRuntimeConfig()

const sharedState = reactive({

  apiBase: config.public.apiBase

})

provide('api', sharedState)



// 确保值正确传递

watch(() => config.public.apiBase, (newVal) => {

  sharedState.apiBase = newVal

}, { immediate: true })

</script>

就这样。

2026-02-01 11:17