Question

我正在将纯Vue应用程序迁移到Vuex，我不确定将数据传递到下游组件的最佳方法。 Vue方式是将它们作为属性传递：

<component :my-prop="myProp"/>

Vuex方式似乎是直接访问商店：

computed: {
    myProp: function() {
        return this.$store.state.myProp;
    }
}

Vuex方式是否倾向于将视图（组件）和数据（存储）层更紧密地耦合在一起？另一方面，传递下游属性可能有点痛苦。

在Vuex中访问商店数据的推荐方法是什么？

Answer 1

不确定“官方”推荐，但我个人更喜欢使用属性。这样，您可以将组件与商店分离。例如。您的组件可以重复使用（在其他项目中，以后等），并且没有将存储作为依赖项。

如果商店发生变化，例如VueX的新版本，后来的另一个最佳实践，只有父母需要更改，所有组件的行为方式都相同。

Answer 2

如上所述，在父级中获取数据，然后将其作为prop传递可能会有点痛苦。为了交换这种痛苦，我们得到了一个更好的设计，想象一下这样的情况：父组件有几个子组件，它自己获取数据并将数据传递给子组件。在这里，我们得到了＃34;痛苦＆＃34;如前所述，但我们获得：当数据API发生变化时，我们只能编辑父组件文件以使其再次工作，只要父级服从接口，孩子就不需要改变（{{1} } s和event s）我们之前定义的。（比较简单，如果我们让孩子们自己获取数据）

一般来说，是否采用一种设计，为我们带来更多建模，更多代码，更多思考，取决于考虑到项目是否会让团队受益整个一生。因此，这些大型系统通常具有大量的设计，因为它们需要经过多年的时间由许多人维护。但是，如果它是一个像我在日常工作流程中为我移动一些文件的脚本的丢弃项目，为什么不是一些肮脏但却有效的代码呢？

此外，我们讨论过的子组件，接收道具，渲染自己，有点像prop s，即如果输入相同的东西，输出相同的东西，无论多次重复。就像我们喜欢的pure function一样，它们通常形式简单，易于维护，但需要一些额外的努力来设计和编写它们，以使它们适应这个不纯洁的世界。

Answer 3

您不需要在vuex商店中保存所有内容。您仍然可以拥有组件数据，并通过props将它们传递给子组件。

以下是我对redux的同一问题的另一个答案：

如果状态不需要与其他组件共享，或者状态在组件卸载时不需要保留，那么您可以将其置于组件的状态。

你可以认为vuex商店是前端的数据库，如果你有从API获取的产品数据，那么vuex商店就是正确的地方;如果你有一个下拉组件，它将采用isOpen prop，那么该下拉列表的父级可以将dropdownIsOpen保持为组件状态。

基本上它是相同的想法，你将有两种组件，容器组件和表示组件。

容器组件将直接访问vuex商店;表示组件不需要了解有关vuex的任何信息，它们只接收道具，因此可以轻松重复使用。

Vuex：直接访问商店或传递属性？

3 个答案: