VueJS中Provide/Inject传递的响应式值变更后未同步更新问题

嘿，我看了你从React转Vue遇到的这个provide/inject响应式同步问题，挺典型的，我来给你捋捋问题出在哪，怎么修复。

首先先揪个小笔误：你Component B里的inject代码写错啦！现在写的是const store: object = inject('store')，但模板里用的是config，这明显对不上，得改成const config = inject('config')，不然你就算把响应式问题修好了，子组件也拿不到父组件传的config对象，会直接报错的。

然后说核心的响应式同步问题：你在Component A里给config.amount赋值的时候用了salesPrice.value，这可是个大坑！salesPrice是个computed对象，.value会取出它当前的具体值（比如一开始是null，接口返回后是某个数字），这个值是普通的原始类型，没有响应式能力。你把它赋值给config.amount后，config.amount就变成了一个固定的静态值，后续不管localState.resellingAmount怎么更新，salesPrice怎么变，config.amount都不会跟着动——因为它和salesPrice已经没有任何关联了。

给你两个简单的修复方案，选哪个都行：

• 方案一：直接把computed对象赋值给config.amount
  去掉.value，让config.amount指向整个computed对象，这样它就能和原computed保持响应式关联：

  // Component A里的config定义改成这样
  const config = reactive({
    amount: salesPrice,
  })
  

  以后不管salesPrice怎么变，config.amount都会同步更新，Component B的模板里直接写{{ config.amount }}就行，Vue会自动帮你解析computed的value。

• 方案二：给config.amount加个getter
  如果你不想把computed对象暴露出去，也可以用getter函数来动态获取最新值：

  // Component A里的config定义改成这样
  const config = reactive({
    get amount() {
      return salesPrice.value
    }
  })
  

  这样每次访问config.amount时，都会重新执行return salesPrice.value，自然能拿到最新的计算结果，完美保持同步。

你可以试试这两种方法，先把笔误改了，再调整config的定义，应该就能看到Component B里的数值跟着父组件的localState更新了。

备注：内容来源于stack exchange，提问作者Jaisal Shah