Vue.js 如何在多用户Vue应用程序中处理刷新

我正在构建一个简单的Vue应用程序，其中一个帐户具有多个报告。当我显示帐户时，我有一个无限加载程序获取帐户的前20个报告。当W用户向下滚动时，将加载下一个20等

我将其设置为Vue使用offet调用API的方式。因此，基本上，

/reports/all？offset=0

将获得前20个，而

/reports/all？offset=20

将获得下一组

现在它工作得很好，效率很高，但由于应用程序是一个多用户应用程序，所以出现了一些困难。因此，在获取前20条记录后，另一个用户可能会为该帐户创建新报告。不幸的是，这些将不会显示，因为偏移量将确保任何新记录都将被传递

现在我想知道，在我已经想到的以下两种方法中，什么是最好的方法（请注意，我也在构建API）：

• 我没有传递偏移量，而是传递一个包含我当前已拥有的帐户所有ID的数组（因此基本上是一个包含我已获取的ID的20、40等ID的数组），这样新记录将自动添加为我收到的新记录集的前几个（按上次创建的记录排序）

• 我不再重复使用数据，并在卸载回调中重置帐户的所有报告，因此基本上每次用户访问组件时，都会再次获取所有数据

真的想知道在这种情况下最好的逻辑是什么，或者是我没有想到的更好的方法

---

非常感谢

您的方法没有错，但是传递一个包含所有ID的数组可能不是最好的方法-随着加载的项目越来越多，此列表将越来越长

第二个想法要好得多——每次加载页面时都加载数据。如果此视图是唯一需要数据的视图，则“是”-信任客户端/服务器缓存以处理标称情况，并将无限滚动窗口设置为较小的数量，尤其是在报告较大的情况下。做一些测试，看看每篇文章阅读到底需要多少秒，并以此作为衡量“正确”窗口大小的标准。请记住，存在较慢的连接，并在测试时使用浏览器工具限制连接

对于这一点，我还可以想到其他几种方法

• 如果报告按时间顺序显示，请使用日期偏移。当用户向下滚动时，获取最后一个日期之前的20。实际上，您可以使用此技术使用时间偏移在两个方向上滚动，因此如果它们向上滚动，您可以加载较新的项目

• 您可以使用任何滚动方式，只需在创建新数据时显示toast/popup/指示，并使用链接/按钮刷新内容、滚动到最新内容、加载最新内容等

• 如果您不太关心顺序，可以使用最后一个id以及列表中的第一个id（或日期等），并让服务器返回新创建的项目。您可能应该让用户直观地知道它们是新项目

---

查看基于光标的分页。基本上，您使用ID而不是任意偏移量，因此取而代之的是在ID为x的记录之后的序列中获取接下来的n条记录。但这仍然会给我错误的偏移量，不是吗？作为我拥有的最新ID，可能比另一个用户创建的ID旧，或者我是否缺少该点？否，因为无论何时使用光标请求上一个/下一个n记录，它将始终在给定ID之前/之后的某一时刻获取上一个/下一个n条记录。与基于页面的分页不同，正如您正确地说的那样，在从一个页面移动到下一个页面之前，可以插入大量记录。