0

我目前正在为 vue.js 中的网络/服务器基础设施开发资产管理器。

我也在使用 vuetify 来实现外观和感觉，因为目标是创建一个渐进式 Web 应用程序。工程师可以使用手机扫描公司资产上的标签以请求详细信息。

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

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

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

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

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

4

1 回答 1

0

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

进一步优化事物的其他一些技巧：

  • 如果您的数据不经常更改，有时在浏览器中保留该数据并没有什么坏处，无论是在进行 http 调用时使用Cache-Control http 标头还是使用浏览器LocalStorage之类的东西或其中一种浏览器中可用的持久性方法。有许多 Vuex 插件可以让这变得非常简单，例如。vuex 持久化。在启动时，您可以从存储中加载此数据，这比进行网络调用要快，您的应用程序将能够更快地响应，您甚至可以在后台发出网络请求以在页面呈现后刷新该数据。
  • 如果检索大量数据是一个问题，那么您可以分页数据以以较小的块检索它，并且仅在用户需要时检索数据的额外“页面”。在表格中，这通常使用分页按钮或无限滚动来完成。有许多库也同时执行这两种操作，分页可能会内置到 vuetify 库表组件中。
于 2019-05-31T15:30:19.297 回答