自包含组件数据模型与主根数据模型

Question

我正在寻找有关我如何实现 Vue 组件的反馈。

我有一个 Vue 实例，其中包含订单列表和对当前订单的引用。让我们将此根实例称为“订单”。

设置当前订单后（基于单击列表中的一个订单），我在“订单”中创建了一个名为“当前订单”的新组件。 “current-order”有一个父级传递给它的名为“order_id”的属性，该属性在“current-order”中用于调用订单数据并呈现可编辑的表单。

在“当前订单”中，除了与订单相关的元数据（客户等）外，我还有第三个组件来包含一组商品，我们将这个最终实例称为“商品组”。

以下是这些实例的总体布局：

orders
  current-order
    item-group
    item-group
    item-group

"orders" 只保存订单列表；它不保存任何订单数据。 "current-order" 保存与订单相关的元数据，以及商品数据。

与一位同事讨论此模型时，他向我解释说这不是实现此模型的最佳实践方式。他认为实现这一点的正确方法是将所有组件的所有数据保存在根实例“订单”上，而不是我实现它的方式 - 保存在每个级别的数据。

他解释的模型对我来说似乎不太易于维护。 “current-order”可以用在我们应用程序的其他页面上，所以如果我在根实例中维护它的数据，我必须在我附加它的所有根实例中都这样做。

按照我的实现方式，你只需要传递一个order_id，它就会自动填充数据。

他继续向我解释说，像我一样在组件上保存数据可以通过重新渲染实例来重置，我不太明白。

我实现的方式和他描述的方式都行得通，但我正在尝试找出可维护性的最佳实践方法。

注意：这不是一个大型的 SPA，而且我认为 Vuex 无法满足我们目前正在努力实现的目标。

如有任何反馈，我们将不胜感激。

Answer 1

这完全取决于您的 child-components 负责什么。如果child 正在扩展您的parent 组件的功能，则应始终在您的父组件中维护该状态。例如，在基于CRUD 的情况下，您可以只编写一个并在父组件中维护其状态（更新/创建），而不是为create 和update 创建单独的组件。

如果在您的current-order 中您没有更新与订单相关的任何内容，则无需在您的order 中维护其状态，即如果元数据可以被视为您的order 的单独实体，则无需在parent 中维护它。但如果 order 和它的 meta 都是一个单一的实体，你应该在你的 parent 中维护它的状态。