javascript - 构建调用以更新全局和本地状态

Question

我的某些组件不想全局存储所有状态。两个例子：


messages组件：用户消息仅在当前组件中才需要获取并本地存储。但是，当无法获取它们时（api错误），应将错误分派到全局状态（vuex）。
buy组件：“最近购买的商品”是在本地获取和存储的，但是“金钱”应该分派到全局状态，并且在无法获取最近的购买商品时也会出错。


我目前正在弄清楚该如何组织，并且需要一些帮助。我有一个目录services，其中包含对我的api的调用。让我们以购买服务为例：

/services/buy.js：

// here code to dispatch money state
// here code to dispatch 'last activity' state

Vue.$http.get('/buy', credentials)
  .then((response) => {
    // return recent buys
  })
  .catch((error) => {
    // here code to dispatch error state
  });

服务之间也有一些逻辑：例如，成功购买后，应从/services/newMessage.js发送一条新消息。

但是，我应该如何以及在何处构建所有这些结构？让我们以 buy组件为例。我看到几个选择：

＃1：这是上面的代码


购买组件将导入购买服务，并将其称为： newBuy()
该服务将资金分派到全球商店，该服务获得最近的购买并将其退还
返回组件，它使用服务返回的值更新本地存储
该组件也具有逻辑：成功返回后，它将调用消息服务以发送新消息： sendMessage()


＃2：与＃1的区别在于逻辑发生在服务内部


该组件导入购买服务并调用它： newBuy()
该服务将资金分派到全球商店，并导入消息服务
消息服务发送一条新消息： sendMessage()
返回购买服务，最近的购买被获取并退回。
组件现在使用返回的值更新本地商店


＃3：与上述步骤的不同之处在于，所有与Vuex相关的动作都在一个特殊的actions.js文件中，因此可以清楚地将全局和局部状态更新分开。


该组件导入购买服务并调用它： newBuy()
该服务导入./store/actions.js并调用 updateMoney()服务，该服务会更新资金
从＃1或＃2的步骤更进一步


有人可以帮我吗？如何结合使用全局和局部状态的组件？是正确方法上方的三个步骤之一？

Answer 1

简而言之，根据您的情况：选项2

对我来说，如果不需要全局共享状态，那么您要做的就是通过将所有内容写入vuex的状态来污染它。

例如，如果您有10个功能类似于购买组件的组件，并且每个组件仅从vuex商店中拉出了他们需要的状态，那么您将使vuex商店更难以推理。

此外，如果您开始为这些状态附加动作和变异，则可能需要为10个组件中的每个组件构建模块，这又使状态和逻辑变得模糊。

因此，在这种情况下，如果您确定不需要在其他位置检索的状态，则选择选项2似乎是更好的方法。您似乎对为什么要使用vuex有了一个很好的了解，从而使您处于一个稳定的状态。我要说的是，大型应用程序的一半工作是在计划中。因此，如果您可以绘制出应用程序的运行方式，并在建立连接所需位置以及组件数据完全隔离的位置之前查看，那么您应该能够快速地做出决定，以决定您做什么和不做什么。 t按下vuex。

关于选项1和2之间的选择，我会再次说到范围和保持DRY的问题。如果每次从newBuy返回数据时都必须调用sendMessage，并且在buy-service中具有数据以填充消息，那么您的服务应该可以协同工作。他们这样做是很好的，毕竟，您毫无疑问以使message-service与发送消息的依赖无关的方式编写buy-service。因此，如果newBuy以类似的方式编写，则可以将其引入并加以利用。

因此，考虑到以上几点，选项1似乎在复制一个函数，该函数每次调用购买服务时都需要运行。出于这个原因，在将来您要扩展功能的情况下，我会避免这样做，因为您的应用程序应该更容易推断是否在各个地方都没有复制依赖函数。取而代之的是，您将查看sendMessage并看到它接收到它的数据，它会调用newBuy()，因此更新很简单并且逻辑很明确。



为了提供更多背景信息，我希望运行如下所示的各个阶段：


该组件导入购买服务并调用：newBuy()


调用newBuy应该向组件返回一个Promise

购买服务导入消息服务
购买服务获取数据，即getMoney调用getRecentBuys和newBuy。


以上两个都返回Promise，现在您使用Promise.all等待2个端点解析并传回其数据。



解决getMoney Promise.all时：


sendMessage()返回的数据：购买服务将资金分配给vuex模块存储


如果您在该商店中拥有各种类型的数据，那么该货币商店可以保存在vuex模块中。这将有助于使其状态，动作等易于使用。

购买服务调用消息服务以发送新消息：newBuy
购买服务解决了其承诺


通过最近的购买作为有效载荷

在组件上解决了承诺，该组件现在使用有效负载更新其本地数据


在拒绝 Promise.all时：


购买服务拒绝其承诺


传递空的有效负载或消息
向vuex商店发送错误

组件上的承诺被拒绝，因此组件知道不更新其本地数据