是否有推荐的 Vue JS 应用程序 API 和 Vuex 设计模式

Posted 2023-02-22

【中文标题】是否有推荐的 Vue JS 应用程序 API 和 Vuex 设计模式

【英文标题】：Is there a recommened VueJS application API and Vuex design pattern

【发布时间】：2021-07-01 23:00:51

【问题描述】：

我和我的团队正致力于中大型应用的起步阶段。这是一个 Vue 2 客户端呈现的应用程序，带有 asp.net 核心后端。客户端将用于管理数以万计的商品及其状态。该应用程序处于早期阶段，我们一直在考虑可以重新构建现有客户端商店的方法。

由于我们都是新手，而且我们都是自学成才的，我们并不确定在 Vue 应用程序中数据管理的最佳模式是什么。

在 VueJS 应用程序中是否有推荐的数据管理模式？

我们目前的模式是这样的：

        |                  |                                                                      
        |   +-----------+  |                                                                      
        |   |           |  |  +-----------+     +-----------+     +------------+                  
        |   |    API    |---->|           |     |           |     |            |                  
        |   |           |  |  | Router    |---->|  Vuex     |---->| Views/     |                  
        |   +-----------+  |  |           |     |           |<----| Components |                  
        |    ^ |     ^     |  |           |     |           |     |            |                  
        |    | |     |     |  +-----------+     +-----------+     +------------+                  
        |    | |     |     |Vue                        |                                          
        |    | |     |     +---------------------------|-------------------------                 
        |    | |     |                                 |                                          
        |Client|     -----------------------------------                                          
        +----|-|---------------------------------------------                                     
             | |                                                                                  
   +---------|-|------                                                                            
   |Backend  | v                                                                                  
   | +----------+                                                                                 
   | |          |                                                                                 
     | DB       |                                                                                 
     |          |                                                                                 
     |          |                                                                                 
     +----------+                                                                                          

我们有一个包含所有 API 端点的 API 控制器。加载应用程序时，在路由器的 beforeEnter 函数中，我们获取所有数据，然后将其提交到 Vuex 存储。然后当用户使用应用程序（添加/删除/编辑）项目时，存储被修改，然后 Vuex 调用 API 控制器并将数据发送到后端。

根据研究，我们对谁应该调用 API 以及 Vuex 应该存储哪些类型的数据提出了一些意见。一些博客和课程说 Vuex 是管理 API 的方式，但受人尊敬的 Vue 社区成员之间的论坛讨论却另有说法。然而，主要问题是 Vue 从 2018/19 年开始快速、不断变化的环境文章和讨论并不真正适用于今天的 Vue。

我们目前的想法不是从路由器提交到 Vuex，而是将数据从路由器传递到视图，然后将视图提交到存储。视图/组件也会调用帖子而不是 Vuex。这将限制商店的责任。

我们还研究了使用 Nuxt.js 的可能性，但他们的文档没有提供关于商店/API 管理的严格指导。

【参考方案1】：

TL;DR：一般来说，在构建大型 Vue.js 应用程序（或 SPA 应用程序）时，您需要混合多种东西。

没有固定的推荐模式可以做到这一点。正确答案总是 - 视情况而定。

以下是一些有帮助的指南：

图层

一般来说，有两种方式——横向分层和纵向分层。通过水平分层，系统被划分为像这样的层

App Level Component
  <-- Multiple Views (pages)
        <-- Business Logic Components
           <-- Re-usable lower order components
           and API (Fetch/XHR/Websockets)

通常，业务逻辑组件是一次性使用的 API 层模块。这些基本上是一堆包含各种 API 调用并对其响应进行规范化的模块。

这看起来很干净，但很快就会因为组件太多而变得笨拙，因为所有东西都在平面文件夹中。

除了 API 层，通常其他层（按业务行为）垂直拆分为模块，所有相关组件和帮助代码都保存在该模块或相关子模块中。例如，在电子商务软件中 - 分为帐户、订单、付款、目录等。

但是，只有当您真正拥有大型应用程序时，垂直分层才有用，否则，简单的水平分层就足够了。

应用状态

这就是事情变得棘手的地方。随着应用程序的发展，这是一个持续的过程。这里要练习的是什么构成了全局状态和本地状态。想象一个带有铃铛图标的应用程序来指示未读消息，并且同一页面在底部某处有一个读取消息的方式（如 Facebook/LinkedIn），其中必须同步和维护状态。

这是全局状态的一个例子，因此它可以在一些***共同祖先甚至更好的外部数据存储中维护，例如 Redux 或 Vuex。两者都一样好。 只有这样的全局和共享状态通常应该建模到显式状态存储中。另一个例子是登录用户的详细信息，可以重新使用

将某些状态列出到存储中的另一个标准是，当您需要时间旅行（撤消和重做）功能或想要为绘图应用、游戏等应用保持本地持久性时。

路由和状态管理

与全局状态一起，路由是应用程序的另一个***关注点。首先总是全局存储，因为路由决策（守卫、预取等）可能会使用存储中的全局数据。因此，您将始终先初始化存储，然后在需要时将其与路由器一起使用。

API 层

将所有 API 代码放在一起，因为它可以快速帮助识别重复项（如果有）。 API 层应尽可能转储，主要处理数据规范化、解析、解码、调整驼峰/蛇形大小写等。API 层不应直接从路由器或全局状态存储访问信息。如果它需要任何东西，它应该由调用者传递给它。

但是，如果您同时使用 GraphQL 和订阅，情况会有所不同。在这种情况下，它会更加了解上下文，因此应该这样设计。

组件设计

明确区分高阶和低阶组件。低阶组件是可重用的，如 Button、Calendar、DatePicker、Dropdown 等。它们不应该了解应用程序及其业务逻辑。就像您拥有可以在任何 Vue.js 应用程序中使用的迷你组件库。

高阶组件是应用程序的主要魔法发生的地方。这些组件将从多个来源（如 router/vuex/api 等）获取数据。这些组件又不是平面的，通常分为自己的层。

应该只允许最顶层的组件访问路由器，并且应该为其子组件提供数据。授权将完全分散在组件层次结构中。

---

有几个链接可以进一步帮助您：

What is the best Vue-Router practice for very large web applications?

Contemporary Front-end Architectures

【参考方案2】：

我认为来自vuex website 的this 图像很好地解释了vuex 的每个元素的关注。操作调用 API，然后是一个突变以提交接收到的响应以更新应用程序的状态。 Vue 组件通过 getter 读取状态。当一个动作提交状态更新时，getter 会更新它们的值，并且您的组件会呈现更新的数据。如果您的 vue 组件需要 API 中的一些数据进行渲染，您可以从导航守卫中调度一个或多个操作，例如 beforeEnter 或 beforeRouteEnter 以加载或更新应用程序状态