如何处理必须过滤的大量数据

Question

您好，我想问一个概念性问题。

假设我有 100000 个具有标签和日期参数的博客。在对 API 的每个请求中，我都会将 n (20) 个博客拉到商店并在一个组件中 我显示最新的 10 个。

我有 3 个组件： 组件 1：显示所有不计标签的数据，并按日期对它们进行排序。 组件 2：显示标签 = "angular" 的过滤数据并按 desc 排序。 组件 3：使用日期排序显示 tag="vue" 的数据。

问题：如何从api中提取数据以及如何存储？ 如果组件 2 是首先从 API 加载数据，那么存储中有 50 条记录都带有标签“angular”

然后用户打开组件 1：它调用了效果，它们是 50 条存储记录，因此没有调用 API。

您将如何定义存储和 API 调用以使组件 1 始终显示正确（混合）数据但不会不必要地调用 API？

谢谢你

Answer 1

1. Component 1 将永远是独立的，因为它包含所有的博客，并且它必须实现分页以避免大流量和 dom 元素。

2. 如果您仍想使用基于标签的现有Component，那么您必须拥有标签map，它保留标签名称及其集合

   {
     'angular' : [.. blogs ..],
     'vue' : [..blogs..]
   } 
   

遍历上面的地图并创建新数组，这个最终的array 可以在Component 1 中使用。