Vue3应用中reactive响应式属性更新未传递到子组件如何解决

问题根源 #

你的问题出在 app.vue 中对全局store的使用方式：你在data函数中通过...this.$store展开了reactive类型的store对象，这个操作会把reactive对象的顶层属性拆解为普通的静态值，直接断开了和原store的响应式关联。也就是说你当前data中声明的selectedItem只是初始化时$store.selectedItem的一次性拷贝，后续$store内的值更新不会同步到这个data属性上，自然子组件的props也收不到更新。

另外注意你app.vue的导入语句还有个小笔误，import Component form './component.vue'里的form要改成from，否则会报导入错误。

修复方案（任选一种即可） #

方案1：直接在模板访问全局store（最简单）

$store已经挂载到Vue全局原型上，模板可以直接访问，不需要额外声明到data中，修改app.vue的代码即可：

<template>
  <component :item="$store.selectedItem" @item-selected="onItemSelected" />
</template>

<script>
import Component from './component.vue';

export default {
  components: {
    'component': Component
  },
  // 删掉原来的data声明
  methods: {
    onItemSelected(item) {
      this.$store.selectedItem = item;
    }
  }
}
</script>

方案2：通过计算属性绑定（适合需要在script中操作该值的场景）

用计算属性建立响应式依赖，store更新时计算属性会自动同步：

<script>
import Component from './component.vue';

export default {
  components: {
    'component': Component
  },
  // 删掉原来的data声明，新增计算属性
  computed: {
    selectedItem() {
      return this.$store.selectedItem
    }
  },
  methods: {
    onItemSelected(item) {
      this.$store.selectedItem = item;
    }
  }
}
</script>

方案3：把整个store实例挂载到data中

如果需要保留data的写法，不要展开store，直接挂载整个reactive实例即可保留响应式：

<script>
import Component from './component.vue';

export default {
  components: {
    'component': Component
  },
  data() {
    return {
      myStore: this.$store
    }
  },
  methods: {
    onItemSelected(item) {
      this.$store.selectedItem = item;
    }
  }
}
</script>

对应修改template的绑定为:item="myStore.selectedItem"即可。

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