Vue.js Options API获取数据后注入子组件失效问题求助

问题核心 #

使用Vue Options API从接口获取数据后，通过provide向子组件传递数据，但子组件inject无法获取到更新后的数组，始终拿到初始空数组。尝试过计算属性、调整代码顺序均无效。

原因分析 #

1. 引用断裂问题：App.vue中provide返回的是this.allCountries的初始空数组引用，当接口请求完成后执行this.allCountries = res时，是直接替换了数组的引用地址，但provide中传递的还是原来的空数组引用，子组件inject到的始终是这个旧引用，自然无法感知数据更新。
2. 子组件数据初始化不响应：Countries.vue中data()里的filteredCountries是在组件初始化时赋值为this.allCountries，这是一次性赋值，后续allCountries即使更新，filteredCountries也不会自动同步，因为data属性不具备自动追踪依赖更新的能力。

解决方案 #

方法一：用对象包装数据，保持引用不变 #

通过将数组包裹在一个对象中，确保数据更新时不会改变引用地址，让provide传递的对象引用始终有效。

修改App.vue：

<script>
import TheHeader from './components/TheHeader.vue'
import Filters from './components/filters/Filters.vue'
import Countries from './components/Countries.vue'

export default {
  data() {
    return {
      // 用对象包裹数组，保持引用不变
      allCountries: { list: [] }
    }
  },
  components: {
    TheHeader,
    Filters,
    Countries
  },
  methods: {
    fetchCountries() {
      fetch('countries.json')
        .then((res) => {
          if (res.ok) {
            return res.json()
          } else {
            return Promise.reject(`Http error: ${res.status}`)
          }
        })
        .then((res) => {
          // 修改对象内的数组，而非替换整个对象
          this.allCountries.list = res
        })
        .catch((error) => {
          console.error(error)
        })
    }
  },
  created() {
    this.fetchCountries()
  },
  provide() {
    return {
      // 传递包装后的对象引用
      allCountries: this.allCountries
    }
  }
}
</script>

修改Countries.vue：

使用计算属性来追踪allCountries.list的变化，确保数据更新时自动同步：

<template>
  <div id="country-wrapper" class="grid grid-cols-auto-fill justify-center gap-12 md:gap-20">
    <CountryItem v-for="country in filteredCountries" :key="country.cca3" :country="country" />
  </div>
</template>

<script>
import CountryItem from './CountryItem.vue'

export default {
  inject: ['allCountries'],
  // 用计算属性替代data，自动追踪依赖更新
  computed: {
    filteredCountries() {
      return this.allCountries.list
    }
  },
  components: {
    CountryItem
  }
}
</script>

方法二：使用getter提供响应式数据 #

在provide中通过getter函数返回最新的allCountries，确保子组件能获取到实时数据：

// App.vue的provide修改为
provide() {
  return {
    get allCountries() {
      return this.allCountries
    }
  }
}

此时Countries.vue仍需用计算属性接收数据，避免一次性赋值导致的不更新问题。

验证效果 #

修改完成后，当接口数据获取完成，子组件的计算属性会自动同步最新数据，v-for能正常渲染国家列表。

内容的提问来源于stack exchange，提问作者Robert Juszczyński