API模式和数据模式

以前,Vuetable只能与提供数据源的API端点一起使用。后来,它被扩展为还支持已经可用的数据。

为了避免在引用Vuetable中的某些功能集时造成混淆,我们开始根据其使用的数据源来命名它们。

如果它与API端点一起检索数据,则称为API模式。如果使用的是手动提供的现有数据,则称为数据模式。但是,大多数功能都可以工作,而与数据源无关。

API模式

API 模式, 默认模式 下,Vuetable将与API端点交互以通过AJAX请求从其请求数据。

通常,API将支持数据的排序,过滤和分页。但是,为此,客户端需要发送带有请求的其他查询,以表明其需要这些功能中的一个或全部。这通常是通过将其他键值对附加到请求的查询字符串来完成的。

因此,特定于API模式的所有功能通常与操纵与该API相关的有效负载有关,包括排序,过滤和分页。

以下是仅适用于API模式的属性列表

数据模式

数据模式,您告诉Vuetable您不希望它处理数据请求,但您将向其提供数据。它将仅格式化和显示在字段定义中指定的每一列中的数据。

要打开数据模式,请将api-modeprop 设置为,false然后通过dataprop或setDatafunction 设置数据 。

<vuetable ref="vuetable"
  :api-mode="false"
  :data="localData"
></vuetable>

默认情况下,诸如排序,过滤和分页之类的数据操作功能将不起作用,因为Vuetable依赖服务器端来提供此类功能。但是,这可以通过对第三方库类的客户端可以轻松完成, 等等。lodash , underscore

这意味着您必须先手动处理数据(排序和过滤),然后才能将处理后的数据分配给Vuetable。

但是,仍然存在一个问题!您如何知道用户已经与Vuetable进行了交互,并期望从这些交互中有所收获?

考虑一下

  • 用户单击列标题,并希望获得基于用户单击的列标题的排序数据。
  • 用户尝试通过输入文本来过滤数据,然后单击搜索或过滤按钮。
  • 用户单击分页链接,并希望该表显示数据的下一页/上一页。

数据管理器

在数据模式下,每当用户与Vuetable交互时将指示对新数据的请求,例如更改排序顺序,过滤数据,移动到另一页等,Vuetable都会data-manager使用两个参数调用prop中定义的函数:

  • sortOrder — 当前的排序顺序数组
  • pagination — 一个空的分页数据对象

您可以使用这些参数对数据进行必要的处理,然后将其从函数中返回。Vuetable将使用此返回的数据来完成其工作。

您可以将其返回为

  • 数据数组,或
  • 包含数据数组和分页元数据的对象。

基本上,数据管理器功能将充当Vuetable尝试从其请求数据的API端点。

请参见以下示例。

Vuetable-2 – 使用 data-manager prop 进行分页的数据模式

使用哪个?

这在很大程度上取决于您的项目和对此的观点。但是,请允许我考虑一下,您自己决定。

Vuetable从一开始就认为要使用API​​端点。这完全基于我为桌面或Web构建应用程序的经验。

我坚信这是构建应用程序的模型。客户端应处理与用户交互的大部分表示,而服务器端应处理应用程序背后的大多数逻辑,其中还包括与数据库相关的功能。

大多数时候,我们在服务器端都有一个功能强大且开发完善的数据库服务器,在该服务器中,它可以执行设计好的出色而有效的任务,例如搜索,排序和过滤数据。这样做的另一个巨大好处是,您的应用程序也将更好地扩展,而不是实施客户端代码来完成这些任务。

因此,Vuetable旨在成为一种表示工具,而绝不会是需要处理和统计大量数据(汇总10,000或数百万个记录)以获取汇总信息的数据分析工具。并不是说它不能做到这一点,但是这样做永远不会非常有效。

但是,这不应限制您使用Vuetable的方式。随着Vuex使用模式的引入,当然可以对您的应用程序进行不同的分区。这就是引入数据模式的地方。如果您的应用程序的一部分已经处理了数据(无论来自何处),而您只需要Vuetable来呈现它,就可以做到。我不能肯定地说它在每种情况下都能正常工作,但是我指望社区提出建议,推荐并分享他们使用Vuetable所取得的成就。因为没有社区的建议,Vuetable永远不会走得那么远。