使 Vue.js 提供/注入响应式

Question

我正在研究组件与其子组件、孙子组件等之间通信的不同方式，并且第一次研究了提供/注入。我可以让它正常工作而无需反应（我知道这是它的设计方式），但无法使用观察到的对象获得反应行为。假设我有一个嵌套对象结构，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，它是未定义的。

我确信这非常简单。我没有得到什么？

Answer 1

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

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

提供商：

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

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

后代组件：

inject: ['getSomething'],

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

因此，在后代组件中，计算属性this.something变得反应性。

Answer 2

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