Javascript Vuex：直接访问存储还是传递属性？

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

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

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

在Vuex中访问存储数据的建议方法是什么？

不确定“官方”建议，但我个人更喜欢使用属性。这样，就可以将组件与存储解耦。例如，您的组件可以重复使用（在其他项目中，稍后等等），并且不需要将存储作为依赖项

---

如果存储区发生更改，例如VueX的新版本，这是以后的另一个最佳做法，则只有家长需要更改，您的所有组件都将以相同的方式运行。

您不需要在VueX存储区中保存所有内容。您仍然可以拥有组件数据，并通过道具将其传递给子组件

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

如果该状态不需要与其他组件共享，或者在卸载组件时不需要保持该状态，则可以将其置于组件的状态

您可以认为vuex存储是前端的数据库，如果您有类似于从API获取的产品数据，那么vuex存储就是正确的位置；如果您有一个下拉组件，该组件将采用等参线道具，则该下拉组件的父级可以将下拉等参线保持为组件状态

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

---

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

正如问题所述，在父级中获取数据，然后将其作为道具传递给下一级可能会有点痛苦。作为这种痛苦的交换，我们得到了一个更好的设计，想象这样一种情况：父组件有几个子组件，它自己获取数据并将数据传递给子组件。这里我们得到了前面提到的“痛苦”，但我们得到了：当数据API更改时，我们只能编辑父组件文件以使其再次工作，只要父组件服从我们之前定义的它们之间的接口（

事件

s和

属性

s），子组件就不需要更改。（如果我们让孩子们自己去拿数据，那就更容易了）

一般来说，是否采用一种能够为我们带来更多建模、更多代码和更多思考的设计，取决于它是否会使团队受益，并考虑到项目的整个生命周期。因此，这些大型系统通常有大量的设计，因为它们需要经过多年的时间由许多人维护。但是，如果这是一个像脚本一样的一次性项目，可以在我的日常工作流程中为我移动一些文件，为什么不使用一些脏的但仍能工作的代码呢

---

此外，我们讨论的子组件，接收道具，渲染它们自己，有点像

纯函数

s，也就是说，如果输入相同，则输出相同的东西，不管重复多少次。就像我们喜欢的函数式编程一样，它们通常形式简单，易于维护，但需要额外的努力来设计和编写它们，以使它们适应这个不纯净的世界。

但是突变呢？如果组件接收到一个存储状态作为属性，并且需要对其应用一个变异，那么该组件无论如何都必须访问全局存储。我们应该将整个存储区（而不仅仅是store.state）传递给组件吗？@Charles传递整个存储区是毫无意义的。此外，子组件不应改变其道具。如果您检查我的答案并了解概念，那么这不是一个问题。组件应该如何从组件触发存储突变，如下面所示。$store.dispatch（'refreshSomething'），it数据作为属性传递？组件/商店仍然结合在一起，不是吗？我想Charles在问一个案例，当你在商店里有类似产品的东西时，组件是该产品的表单编辑器。产品应该通过属性传入，还是直接从子组件中的存储中获取。这些问题背后的概念是相同的。如何在组件状态和全局存储之间进行选择。它还将涉及到基于组件的系统的设计在产品案例中，表单编辑器是一个容器（智能）组件，因此它可以直接访问和修改存储数据。通过道具通过商店是没有意义的。

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