使用后端REST API的Vue应用程序的设计模式

Question

基本体系结构是一个服务器端呈现的HTML页面，其中Vue.js处理网站的某些页面但不是所有页面的表示层。我们正在制作有点像Trello卡或Github问题的东西。主数据模型是一个“任务”对象，它具有各种属性：进度状态，子任务和注释。

我们希望在页面上显示这些对象，允许用户创建和更新它们及其子对象，这些对象将作为单独的组件呈现。

我们的问题在于找到正确的方法将更改从对象传递到后端服务器，然后再返回。我们正在使用Axios与我们的后端（在Django Rest Framework上运行）进行通信。

最初，我们实施了一个复杂的观察链，以跟踪应用中的状态变化，允许它们通过Vue组件的层次结构向Axios HTTP方法发出。然而，这看起来有点脆弱，维护起来确实很复杂。

我们应该使用Vuex来管理应用的状态吗？ 或者文档中描述的更简单的event bus pattern？

Answer 1

您对复杂的观察者链的想法对于扩展应用程序是完全危险的。维护所有发射都会遇到很多问题，特别是当有新人进入项目时。您应该保留所有在Vuex中应用的状态，实现起来非常简单，这将为您带来巨大的好处。

Answer 2

我建议您使用Vuex。 EventBus很有用，但组织性不如Vuex商店。

针对您的方案的Vuex使用技巧：

• 我也将所有API调用都放在了商店的操作中。
• 将您的商店分成多个模块，以使其更加井井有条。
• 在组件中使用计算出的属性以使用商店数据。