Vue和Vuex Getter与通过道具传递状态

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

在每个组件内部，您都可以访问该对象，this.$store因此可以actions通过调度，提交数据mutations或通过读取数据getters

阅读文档以获取更多详细信息：

通过为根实例提供store选项，该商店将被注入到根的所有子组件中，并将以this。$ store的形式在其上可用。

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

这会造成混乱，您是正确的。这是vuex解决的问题之一。

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

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

另一方面，某些组件是如此紧密地耦合，以至于传递道具是显而易见的解决方案。例如，您有一个list-container组件，其直接子级是该list组件，并且两个组件都需要相同的列表数据。在这种情况下，我会将列表数据list作为道具传递给组件。

---

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

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

以及它的兄弟选项inheritAttrs。

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

结合使用这两个选项，您可以使用更少的样板代码将道具向下传递到多个组件级别。