如何最小化vuejs中的数据流量

Question

在工作中，我们考虑将 Vuejs 与 Vuex 一起用于我们的前端。我已经将它用于私人项目。

我们的一个大问题是交通。我们的平台需要大量数据，有时是大包。其中一些确实很大，而且加载它们不止一次会更昂贵。

我看过很多 vue 和 vuex 的例子，但对我来说，看起来所有的例子在每次分页时都会请求相同的（已经加载的）数据。

我真正的问题是：vuejs或general有没有办法避免或解决这个问题？到目前为止，我发现的唯一有用的东西是 this。

Answer 1

据我所知，你可以使用这个库https://github.com/kuitos/axios-extensions

这里有一个例子

import Axios from 'Axios';

import { throttleAdapterEnhancer } from 'axios-extensions';

const http = axios.create({
    baseURL: '/',
    headers: { 'Cache-Control': 'no-cache' },
    adapter: throttleAdapterEnhancer(axios.defaults.adapter, { threshold: 2 * 1000 })
});

http.get('/users'); // make real http request
http.get('/users'); // responsed from the cache
http.get('/users'); // responsed from the cache

setTimeout(() => {
    http.get('/users'); // after 2s, the real request makes again
}, 2 * 1000)

如您所见，您可以创建一个适配器并自定义您想要的内容。例如这里，您只保留缓存 2 秒。所以对 /users 的第一个请求是真实的。 second和thirst request是缓存的，最后一个是在两秒之后，所以是真的。

您能否更具体地说明您将如何保留缓存的上下文。什么时候需要重新加载缓存，多少次之后，在哪个事件之后，...？

Answer 2

我使用的策略是将值存储在 Vuex 状态上。

我把我所有的请求都写在 Vuex 动作中。在每个动作中，我都会检查数据是否已经存在于 Vuex 状态中。如果是这样，我只是绕过请求和 return 来自状态的数据（避免请求被多次调用）。如果不存在，我会发出请求，然后将结果存储在 Vuex 状态中，并且 return 值。

Vuex 动作：

getLists({ state, commit }) {
  return new Promise((resolve, reject) => {
    if (state.isSetLists === false) {
      getListsFromServer((error, data) => {
        if (error) {
          reject(error);
        } else {
          console.log('call to getLists successful:', data);
          commit('setLists', data.lists);
          resolve(data.lists);
        }
      });
    } else {
      resolve(state.lists);
    }
  });
},

然后，setLists 突变处理如下：

setLists(state, lists) {
  state.isSetLists = true;
  state.lists = lists;
},

通过这种方式，用户可以随心所欲地翻页，并且每个请求只调用一次。

如何最小化vuejs中的数据流量

How to minimize data traffic in vuejs

vue.js

vuejs2

vuex

web-traffic