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

Posted 2023-02-22

【中文标题】带有后端 REST API 的 Vue 应用程序的设计模式

【英文标题】：Design pattern for Vue app with backend REST API

【发布时间】：2018-10-21 02:01:02

【问题描述】：

基本架构是一个服务器端呈现的 html 页面，其中 Vue.js 处理网站的一些（但不是全部）页面的表示层。我们正在制作一些有点像 Trello 卡或 Github 问题的东西。主数据模型是一个“任务”对象，它具有各种属性：progress-status、sub-tasks和cmets。

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

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

最初，我们实现了一个复杂的观察者链来跟踪应用程序中的状态变化，允许它们通过 Vue 组件的层次结构向上发送到 Axios HTTP 方法。但是，这似乎有点脆弱，而且维护起来肯定很复杂。

我们应该改用 Vuex 来管理应用程序的状态吗？ 还是文档中描述的更简单的event bus pattern？

【问题讨论】：

这个问题对 SO 来说太宽泛了，但如果有帮助，我在 Vue communication theory 上写了另一个答案。 Vuex 肯定会有所帮助，通过 Axios 在存储操作中调用您的端点。

【参考方案1】：

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

【参考方案2】：

我建议使用 Vuex。 EventBus 很有用，但不像 Vuex 商店那样有条理。

在您的场景中使用 Vuex 的提示：

我也将所有 API 调用放入商店的操作中。 将您的商店分成模块，使其更有条理。 在组件中使用计算属性来使用存储数据。