Vue中使用provide/inject传递axios异步获取的数据失败如何解决？

• 核心问题1：provide/inject 默认是非响应式的，且父组件的provide仅在组件初始化阶段执行一次，你初始化时传递的是theme初始值（空数组）的引用，后续你在axios回调中直接替换了this.theme的引用，子组件inject持有的还是旧引用，自然无法拿到更新后的数据
• 问题2：初始值类型不匹配，你在data中将theme初始化为数组[]，但子组件中使用了theme.courses，说明接口返回的是包含courses属性的对象，初始类型错误会导致渲染时报错

通用兼容方案（Vue2/Vue3都适用） #

修改provide传递一个获取最新theme的函数，子组件通过计算属性接收，保证每次都能拿到最新值：
父组件修改：

provide() {
 return {
   // 传递函数，每次调用都返回最新的theme值
   getTheme: () => this.theme
 }
},

子组件修改：

export default {
  inject: ["getTheme"],
  components: {
    ProjectCard,
  },
  computed: {
    theme() {
      return this.getTheme()
    }
  }
};

同时修正父组件的初始值类型，避免报错：

data() {
  return {
    // 初始化为对象，和接口返回类型对齐
    theme: {},
  };
}

子组件模板可以加可选链兼容初始空值情况：

<project-card
v-for="course in theme?.courses"
:name="course.name"
:key="course.id"
></project-card>

Vue3专属方案 #

如果使用Vue3，直接将theme定义为ref或者reactive类型的响应式数据，provide时直接传递响应式对象即可：

import { ref, provide } from 'vue'
const theme = ref({})
provide('theme', theme)

// 赋值时修改value即可，不需要替换引用
theme.value = response.data.data

子组件直接inject接收即可拿到响应式数据。

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