时间戳

首页 > 解决方案 > 是否有推荐的 VueJS 应用程序 API 和 Vuex 设计模式

api - 是否有推荐的 VueJS 应用程序 API 和 Vuex 设计模式

问题描述

我和我的团队正在研究中大型应用程序的开端。这是一个 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 的可能性，但他们的文档没有提供关于 store/API 管理的严格指导。

标签： apirestvue.jsnuxt.jsvuex

解决方案

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 层，通常其他层（按业务行为）垂直拆分为模块，所有相关的组件和帮助代码都保存在该模块或相关的子模块中。例如，在电子商务软件中——拆分为账户、订单、支付、目录等。

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

应用状态

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

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

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

路由和状态管理

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

API 层

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

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

组件设计

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

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

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

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

对于非常大的 Web 应用程序，最好的 Vue-Router 实践是什么？

当代前端架构

推荐阅读