使用 vuex 时管理 api 个调用
manage api calls when using vuex
我目前正在为 vue.js 的 network/server 基础设施开发资产管理器。
我也在使用 vuetify 来实现外观和感觉，因为我的目标是创建一个渐进式网络应用程序。工程师可以使用他们的 phone 扫描公司资产上的标签以请求详细信息。
目前所有数据都使用 rest api 加载到应用程序中。我在应用程序中使用 vuex 进行状态管理。
我想了解何时启动这些 api 请求。
因此，在加载主核心视图时登录后，我当前在 Web 应用程序启动时加载了一些数据。这正在影响性能。加载数据的一些示例：
-> 资产类型、供应商、供应商...
该数据在应用程序的很多地方使用。 （表格，过滤器，...）
我不喜欢调用 vuex 操作来在特定组件内执行 api 请求表单，因为这可能会在浏览应用程序时导致不必要的请求。
唯一的例外是他们自己的资产，因为这是一开始要加载的大量数据。
我面临的问题是，在移动平台上每次启动应用程序时加载数据都是对数据连接的浪费。工程师可能正在使用该应用程序，但实际上并不需要数据。
我知道这是一个抽象的问题，我不是在寻找最后一个答案。只是来自社区的一些见解或建议。
如果我误解了请纠正我，但听起来你在启动时预取了很多非关键信息。您应该真正关注何时真正需要该数据，并且仅在实际需要时才伸出手并检索它。这种情况的常见情况是路由更改，因此如果您的应用程序中有多个页面，管理页面可能需要您的主屏幕不需要的数据。等到您导航到该页面，然后再检索特定于该页面的信息。这通常在 beforeRouteEnter 路由器挂钩或 created 生命周期挂钩中完成。现在以此为基础，在路由更改后可能需要一些时间来下载新数据——页面可能会在所有必要数据可用之前呈现。您可以使用 Vue-Promised 之类的库来处理需要仍在加载的数据的部分的中间状态。这使您可以让页面快速呈现，而无需等待其所有数据。
进一步优化事物的其他一些技巧：
- 如果您的数据不经常更改，有时使用 Cache-Control http header when making your http calls or by using something like the browsers LocalStorage or one of the hard persistence methods available within the browser. Theres a number of Vuex plugins that make this really easy, ex. vuex-persist 在浏览器中保存该数据也无妨。在启动时，您可以从存储中加载此数据，这比进行网络调用更快，您的应用程序将能够更快地响应，您甚至可以在后台发出该网络请求以在页面呈现后刷新该数据。
- 如果检索大型数据集是一个问题，那么您可以对数据进行分页以将其检索为较小的块，并且仅在用户需要时才检索额外的 "pages" 数据。在 table 中，这通常使用分页按钮或 infinite scrolling 来完成。有许多库也可以同时执行这两项操作，分页可能会内置到 vuetify 库 table 组件中。
我目前正在为 vue.js 的 network/server 基础设施开发资产管理器。
我也在使用 vuetify 来实现外观和感觉，因为我的目标是创建一个渐进式网络应用程序。工程师可以使用他们的 phone 扫描公司资产上的标签以请求详细信息。
目前所有数据都使用 rest api 加载到应用程序中。我在应用程序中使用 vuex 进行状态管理。
我想了解何时启动这些 api 请求。
因此，在加载主核心视图时登录后，我当前在 Web 应用程序启动时加载了一些数据。这正在影响性能。加载数据的一些示例： -> 资产类型、供应商、供应商... 该数据在应用程序的很多地方使用。 （表格，过滤器，...） 我不喜欢调用 vuex 操作来在特定组件内执行 api 请求表单，因为这可能会在浏览应用程序时导致不必要的请求。 唯一的例外是他们自己的资产，因为这是一开始要加载的大量数据。
我面临的问题是，在移动平台上每次启动应用程序时加载数据都是对数据连接的浪费。工程师可能正在使用该应用程序，但实际上并不需要数据。
我知道这是一个抽象的问题，我不是在寻找最后一个答案。只是来自社区的一些见解或建议。
如果我误解了请纠正我，但听起来你在启动时预取了很多非关键信息。您应该真正关注何时真正需要该数据，并且仅在实际需要时才伸出手并检索它。这种情况的常见情况是路由更改，因此如果您的应用程序中有多个页面，管理页面可能需要您的主屏幕不需要的数据。等到您导航到该页面，然后再检索特定于该页面的信息。这通常在 beforeRouteEnter 路由器挂钩或 created 生命周期挂钩中完成。现在以此为基础，在路由更改后可能需要一些时间来下载新数据——页面可能会在所有必要数据可用之前呈现。您可以使用 Vue-Promised 之类的库来处理需要仍在加载的数据的部分的中间状态。这使您可以让页面快速呈现，而无需等待其所有数据。
进一步优化事物的其他一些技巧：
- 如果您的数据不经常更改，有时使用 Cache-Control http header when making your http calls or by using something like the browsers LocalStorage or one of the hard persistence methods available within the browser. Theres a number of Vuex plugins that make this really easy, ex. vuex-persist 在浏览器中保存该数据也无妨。在启动时，您可以从存储中加载此数据，这比进行网络调用更快，您的应用程序将能够更快地响应，您甚至可以在后台发出该网络请求以在页面呈现后刷新该数据。
- 如果检索大型数据集是一个问题，那么您可以对数据进行分页以将其检索为较小的块，并且仅在用户需要时才检索额外的 "pages" 数据。在 table 中，这通常使用分页按钮或 infinite scrolling 来完成。有许多库也可以同时执行这两项操作，分页可能会内置到 vuetify 库 table 组件中。