vue&vuex getter vs通过道具传递状态

Question

我见过很多人建议通过props将状态传递给组件,而不是直接访问组件内部的vue状态,​​以使其更具可重用性.

但是,如果我一直这样做,这意味着只有路由根组件才能与商店通信,并且所有数据都需要通过嵌套层次结构传递才能获得最终组件.这似乎很容易造成混乱:

Dashboard
   Profile
   Billing
      History
      CreditCards
         CreditCard

如何为用户信用卡加载数据？在仪表板中将它一直传递到树下？

Answer 1

它会导致一团糟,你是对的.这是vuex解决的问题之一.

那么你如何决定是否传递道具或使用vuex？当我说使用vuex时,我的意思是直接从需要它的组件访问商店数据.诀窍是考虑每个数据与整个应用程序的关系.

在整个页面中重复使用的数据,在许多DOM层次结构中,在不同页面中使用的数据等是使用vuex的理想情况.

另一方面,一些组件紧密耦合,通过道具是明显的解决方案.例如,您有一个list-container组件,其直接子list组件是组件,并且它们都需要相同的列表数据.在这种情况下,我会将列表数据list作为道具传递给组件.

您可能对实例属性感兴趣 $attrs

https://vuejs.org/v2/api/#vm-attrs

以及它的兄弟选项inheritAttrs.

https://vuejs.org/v2/api/#inheritAttrs

结合使用这两个允许您使用较少的样板代码将道具传递到多个组件级别.