Question

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

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

Dashboard
   Profile
   Billing
      History
      CreditCards
         CreditCard

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

Answer 1

这会导致一团糟，你是对的。这是vuex解决的问题之一。

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

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

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

您可能对实例属性$attrs

感兴趣

以及它的兄弟选项inheritAttrs。

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

Answer 2

每个组件，无论其层次结构位置如何，都可以与商店进行通信。

在每个组件中，您都可以访问对象this.$store，这样您就可以发送actions，通过mutations提交数据或通过getters

读取数据

通过向根实例提供商店选项，商店将是注入根的所有子组件并将可用在他们身上。$ store。

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}