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

【问题标题】：vue & vuex getter vs passing state via propsvue & vuex getter vs 通过道具传递状态
【发布时间】：2018-04-14 15:48:28
【问题描述】：

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

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

Dashboard
   Profile
   Billing
      History
      CreditCards
         CreditCard

如何加载用户信用卡的数据？在 Dashboard 中并一直向下传递？

【问题讨论】：

虽然不是真正的答案（而且有点晚了），但我想说重新考虑应用程序的架构可能会解决您的许多问题，而无需使用其他解决方案对其进行修补。从这个小例子中很难看出，但我想说的是，CreditCards 会更好地提供更高层次的服务，因为它不依赖于 Billing，或者是 Billing 的衍生产品。如果他们是兄弟而不是父子，您就不必传递用户数据，并且您的数据管理会简单得多。

标签： vue.js vuex

【解决方案1】：

这会造成混乱，你是对的。这是 vuex 解决的问题之一。

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

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

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

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

连同它的兄弟选项inheritAttrs。

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

【讨论】：

我想问一个关于列表的例子。如果有一个列表页面和一个组件来过滤列表。该组件需要有信息来构建过滤器最大最小值和值的东西，然后列表本身需要在执行过滤器内容时监听单击事件并获取当前设置的过滤器值。所以在我看来，这应该是一个道具解决方案。但是如果应该保存当前的过滤器状态呢？列表是否在按下过滤器并获取当前对象后保存它，还是组件访问存储中的某种过滤器对象？

【解决方案2】：

每个 Component，无论其 Hierarchy 位置如何，都可以与 store 通信。

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

通过向根实例提供存储选项，存储将是注入到根的所有子组件中并且将可用像this.$store一样在他们身上。

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

【讨论】：