使 Vue.js 提供/注入反应式答案

【问题标题】：Making Vue.js provide/inject reactive使 Vue.js 提供/注入反应式
【发布时间】：2021-08-10 00:21:49
【问题描述】：

我正在了解组件与其子、孙等之间的不同通信方式，并且第一次研究了提供/注入。我可以让它在没有反应的情况下正常工作（我知道这是它的设计方式），但无法使用观察到的对象获得反应行为。假设我有一个嵌套对象结构，A > B > C，其中 A 是 C 的祖父母。我有一个 A 的数据属性“页面”，我想在孙子 C 中观察到它的变化。如果我只是在 A 中提供“页面”并在 C 中注入“页面”，它不是反应式的（按设计）。我想如果我做这样的事情，它可能会起作用：

在提供者中：

data() {
    return {
      page: null,
      obj:{currentPage:this.page}
    }
},


provide(){
     return {
       obj: this.obj
     }
  }

在孩子或孙子中：

inject: ['obj']

但事实并非如此。如果我尝试在孙组件中使用 obj.currentPage，它是未定义的。

我相信这很简单。我没有得到什么？

【问题讨论】：

如果想让孙子观察祖父的变化，大概有几种方法：（1）使用事件总线，（2）将父数据作为prop一路传下去一直到孙子，所以孙子可以观察继承的数据本身，或者（3）使用 VueX（可能是矫枉过正）
谢谢，我知道这些解决方案。不过，我想在这里了解提供/注入，所以我知道如何正确使用它。
只是我的猜测，可能是因为您对数据和提供者使用相同的名称“obj”，请尝试更改一个
不，名字没有区别。

标签： vue.js

【解决方案1】：

我花了很多时间，试图让提供/注入的对象反应，毕竟它是尤里卡！我们可以简单地传递一个返回对象的函数，而不是对象本身。

这对我来说似乎是一个很好的解决方案。

提供者：

data(){
 return {
   something: ...,
 }
}

provide(){
 return {
  getSomething: () => this.something,
 }
}

后代组件：

inject: ['getSomething'],

computed: {
 something(){
  return this.getSomething();
 }
}

因此，在后代组件中，计算属性 this.something 变为响应式。

【讨论】：

在 vue 3 中对我不起作用
你在使用 TypeScript 吗？
不，我不使用它

【解决方案2】：

嗯，与以往一样，答案与我所寻找的地方完全不同。提供的“obj”对象的反应性没有任何问题。问题在于对象没有在父数据对象中更新。我有obj:{currentPage:this.page} 假设当this.page 更改时，obj 中的属性会更新，但事实并非如此。所以我在这里有两个选择，除非我错过了什么：首先，在page 上使用watch，更新obj 属性；或者完全忘记this.page，并确保迄今为止对this.page进行的任何更新都改为对this.obj.currentPage进行。这只是决定哪种方法不那么混乱的一个案例。有趣的学习练习的所有部分。

【讨论】：

感谢您的自我回答，解决了我的困惑。