Question

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

messages组件：usermessages被提取并存储在本地，因为它们仅对当前组件是必需的。但是当它们无法获取时（api错误），错误应该被分派到全局状态（vuex）。
buy组件：＆＃39;最近购买＆＃39;在本地提取和存储，但是“钱”和“应该被分派到全局状态，并且当最近的购买无法获取时也会出错。

我目前正在弄清楚如何构建这个，我需要一些帮助。我有一个目录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这样才能让你处于有利地位。我想说有一半的大型应用程序工作正在进行规划。因此，如果您可以在构建连接所需的位置之前确定应用程序的运行和查看方式，并且反过来将组件数据完全隔离，您应该能够快速做出关于您做什么的决定并且不要做推到vuex。

在选项1和选项之间的选择方面2我会再说这个问题再归结为范围问题和保持干燥的问题。如果每次从newBuy返回数据时，您都必须致电sendMessage并且您拥有buy-service中的数据来填充消息，那么您的服务应该一起工作。他们这样做很好，毕竟你毫无疑问地以message-service的方式将它与发送消息之外的任何依赖性分开。因此，如果buy-service以类似的方式编写，它可以将其拉入并使用它。

考虑到上述情况，选项1因此似乎重复了每次调用购买服务时需要运行的功能。出于这个原因，我会避免它以防将来你想要扩展的东西，因为你的应用程序应该更容易推理，如果不依赖的功能不在各个地方复制。相反，你会看newBuy并看到它接收到它的数据，它会调用sendMessage，因此更新很简单，逻辑清晰。

为了提供更多的上下文，我希望运行以下各个阶段：

组件导入购买服务并致电：newBuy()

致电newBuy()应将承诺返回组件

购买服务会导入消息服务

购买服务会提取数据，即newBuy来电getMoney和getRecentBuys。

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

解析newBuy Promise.all ：

getMoney返回数据：购买服务将资金发送到vuex模块商店

如果您在此商店中有各种类型的数据，则可以在vuex模块中存储货币存储。
将有助于使其状态，行动等更容易使用

购买服务调用消息服务发送新消息：sendMessage()

购买服务解析其承诺

将最近购买的内容作为有效负载
传递

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

拒绝newBuy Promise.all ：

购买服务拒绝其承诺

传递空的有效负载或消息

向vuex商店发送错误

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

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

1 个答案: