我目前正在 vue.js 中为网络/服务器基础设施开发资产管理器。
我还使用 vuetify 作为外观和感觉，因为目标是创建一个渐进式 Web 应用程序。 工程师可以使用他们的手机扫描公司资产上的标签以请求详细信息。
目前，所有数据都使用 rest API 加载到应用程序中。我正在使用 vuex 在应用程序中进行状态管理。
我想了解何时启动这些 api 请求。
因此，我目前在加载主核心视图时登录后立即在 Web 应用程序开始时加载了一些数据。这会影响性能。加载数据的一些示例： ->资产类型，供应商，供应商,... 此数据在应用程序中的很多地方使用。(表单，过滤器,...) 我宁愿不调用 vuex 操作来在特定组件中执行 api 请求表单，因为这可能会导致浏览应用程序时不必要的请求。 唯一的例外是它们自己的资产，因为这是在开始时要加载的大量数据。
我面临的问题是，在移动平台上，每次在应用程序启动时加载数据都是浪费数据连接。工程师可能在实际不需要数据的情况下使用该应用程序。
我知道这是一个抽象的问题，我不是在寻找最后一个遮阳篷。只是来自社区的一些见解或建议。
如果我误解了，请纠正我，但听起来您在启动时正在预获取大量非关键信息。您应该真正关注何时实际需要该数据，并且仅在实际需要时才联系并检索它。一个常见的情况是路由更改，因此，如果您的应用程序中有多个页面，则管理页面可能需要主屏幕不需要的数据。请等到导航到该页面后再检索特定于该页面的信息。这通常在beforeRouteEnter路由器挂钩或created生命周期挂钩中完成。现在，为了在此基础上进行构建，在路由更改后下载新数据可能需要一些时间 - 页面可能会在其所有必要的数据可用之前呈现。您可以使用像 Vue-Promise 这样的库来处理需要仍在加载的数据的部分的中间状态。这使您可以让页面快速呈现，而无需等待其所有数据。
进一步优化的其他一些技巧：
- 如果您的数据不经常更改，有时在浏览器中保留该数据并没有什么坏处，无论是在进行 http 调用时使用 Cache-Control http 标头，还是使用浏览器 LocalStorage 之类的东西或浏览器中可用的硬持久性方法之一。有许多 Vuex 插件使这变得非常简单，例如 vuex-persist。在启动时，您可以从存储中加载此数据，这比进行网络调用更快，您的应用程序将能够更快地响应，您甚至可以在后台发出该网络请求以在页面呈现后刷新该数据。
- 如果检索大型数据集是一个问题，那么您可以对数据进行分页以在较小的块中检索它，并且仅在用户需要时才检索数据的其他"页面"。在表格中，这通常使用分页按钮或无限滚动来完成。有许多库也同时执行这两项操作，分页可能会内置到 vuetify 库表组件中。