Vue 3组合式API中Provide/Inject状态传递失效如何解决？

你的问题主要出在调用时机错误或组件层级不匹配上，以下是具体解决步骤：

1. 确保provide/inject在组件setup上下文内调用 #

在Vue Composition API中，provide和inject必须在组件的setup生命周期上下文里执行——也就是放在<script setup>语法块中，或者选项式API的setup()函数内部，不能直接在模块顶层调用，否则无法关联到组件实例。

修正后的组件A（<script setup>语法） #

<script setup>
import { provide } from 'vue';

// 必须在<script setup>内调用provide
provide('global', 'test');
</script>

修正后的组件B（<script setup>语法） #

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

// <script setup>会自动将顶层变量暴露给模板
const global = inject('global');
</script>

<template>
  From A: {{ global }}
</template>

如果使用选项式API的setup()函数，注意组件B需要把inject得到的变量return出去，模板才能访问：

选项式API的组件A #

<script>
import { provide } from 'vue';

export default {
  setup() {
    // 在setup函数内执行provide
    provide('global', 'test');
  }
}
</script>

选项式API的组件B #

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

export default {
  setup() {
    const global = inject('global');
    // 必须return变量，模板才能读取
    return { global };
  }
}
</script>

<template>
  From A: {{ global }}
</template>

2. 确认组件层级关系 #

组件B必须是组件A的直接或间接后代组件（比如组件A的模板里渲染了组件B，或者组件A的子组件中渲染了组件B）。provide/inject是基于Vue组件树的上下文传递，只有当组件B处于组件A的子树中时，才能获取到对应的值。

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