使用vuex时管理api调用

Question

我目前正在vue.js中从事网络/服务器基础结构资产管理器的工作。

由于目标是创建一个渐进式Web应用程序，因此我还在外观上使用vuetify。工程师可以使用手机扫描公司资产上的标签以请求详细信息。

当前，所有数据都使用rest api加载到应用程序中。我在应用程序中使用vuex进行状态管理。

我希望了解何时启动这些api请求。

因此，在登录主核心视图后刚登录后，当前在Web应用程序的开头加载了一些数据。这会影响性能。加载数据的一些示例： ->资产类型，供应商，供应商，... 该数据在应用程序的很多地方都使用过。 （表格，过滤器...） 我不想在特定组件内调用vuex操作来执行api请求表单，因为这在浏览应用程序时可能导致不必要的请求。 唯一的例外是它们自己的资产，因为一开始要加载很多数据。

我面临的问题是，在移动平台上，每次在应用程序启动时加载数据都是浪费数据连接。工程师可能会在实际不需要数据的情况下使用该应用程序。

我知道这是一个抽象的问题，我不是在寻找最后一个遮阳篷。只是社区的一些见识或建议。

Answer 1

如果我误解了，请纠正我，但听起来您在启动时就预取了很多非关键信息。您应该真正专注于实际需要该数据的时间，并且仅在实际需要该数据时才进行访问和检索。常见的情况是更改路线，因此，如果您的应用中有多个页面，则管理页面可能会需要主屏幕不需要的数据。等待直到导航至该页面，然后检索特定于该页面的信息。这通常是在beforeRouteEnter路由器挂钩或created生命周期挂钩中完成的。现在以此为基础，在更改路线后可能需要一些时间来下载新数据-该页面可能在其所有必要数据都可用之前呈现。您可以使用Vue-Promised之类的库来处理需要仍在加载数据的节的中间状态。这样一来，您就可以快速呈现页面，而不必等待所有数据。

其他一些进一步优化内容的提示：

• 如果您的数据不经常更改，则在进行HTTP调用时使用Cache-Control http header或使用类似浏览器的{{3 }}或浏览器中可用的硬持久方法之一。例如，有许多Vuex插件使这变得非常容易。 LocalStorage。在启动时，您可以从存储中加载此数据，这比进行网络调用更快，您的应用将能够更快地响应，您甚至可以在后台发出该网络请求以在页面呈现后刷新该数据。 / li>
• 如果检索大型数据集是一个问题，那么您可以分页数据以较小的块进行检索，并且仅在用户需要时才为数据检索其他“页面”。在表格中，通常使用分页按钮或vuex-persist完成此操作。同时有很多库可以同时执行这两种操作，因此分页可能会内置到vuetify库表组件中。