我正在将一个纯 Vue 应用程序迁移到 Vuex，但我不确定将数据传递给下游组件的最佳方式。 Vue 的方式是将它们作为属性传递：
<component :my-prop="myProp"/>
Vuex的方式好像是直接访问store：
computed: {
myProp: function() {
return this.$store.state.myProp;
}
}
Vuex 的方式不是更紧密地耦合视图（组件）和数据（存储）层吗？另一方面，将属性向下传递可能会有点痛苦。
在 Vuex 中访问存储数据的推荐方式是什么？
【问题讨论】：
标签： javascript frontend vue.js vuex
不确定“官方”建议，但我个人更喜欢使用属性。这样，您就可以将组件与 store 分离。例如。您的组件可以重用（在其他项目中，稍后等），并且没有商店作为依赖项。
如果商店发生变化，例如VueX 的新版本，以后的另一个最佳实践，只需要更改父组件，您的所有组件都会以相同的方式运行。
【讨论】：
如问题所述，获取父级中的数据，然后将其作为props 传递可能有点痛苦。作为这种痛苦的交换，我们得到了一个更好的设计，想象一下这样的情况：一个父组件有几个子组件，它自己获取数据并将数据传递给子组件。这里我们得到了前面所说的“痛苦”，但我们得到了：当数据API发生变化时，我们可以只编辑父组件文件使其再次工作，只要父遵循接口，子不需要更改（events 和 props）在我们之前定义的它们之间。 （比较容易，如果我们让孩子自己获取数据）
总的来说，是否采用一种设计，给我们带来更多的建模、更多的代码、更多的思考，取决于考虑到项目的整个生命周期，它是否有利于团队时间>。因此，那些大型系统通常有大量的设计，因为它们需要由许多人维护，经过多年的时间。但是，如果它是一个像在我的日常工作流程中为我移动一些文件的脚本这样的一次性项目，为什么不是一些肮脏但有效的代码呢？
另外，我们讨论的子组件，接收props，渲染自己，有点像pure functions，也就是说，输入相同输出相同的东西，但重复多次。就像我们喜欢functional programming 一样，它们通常形式简单，易于维护，但需要额外的努力来设计和首先编写它们，以使它们适应这个不纯的世界。
【讨论】：
您不需要将所有内容都保存在 vuex 商店中。你仍然可以拥有组件数据，并通过 props 将它们传递给子组件。
这是我对 redux 相同问题的另一个回答：
如果状态不需要与其他组件共享，或者在组件卸载时状态不需要保持，那么你可以将它放在组件的状态中。
你可以认为 vuex store 是前端的数据库，如果你有从 API 获取的产品数据之类的东西，那么 vuex store 是正确的地方；如果您有一个下拉组件，它将采用 isOpen 道具，那么该下拉列表的父级可以将 dropdownIsOpen 保持为组件状态。
基本上是一样的想法，你会有两种组件，容器组件和展示组件。
容器组件将直接访问 vuex 存储；展示组件不需要了解任何关于 vuex 的知识，它们只接收道具，因此可以轻松重用。
【讨论】：