在工作中，我们考虑将 Vuejs 与 Vuex 一起用于我们的前端。我已经将它用于私人项目。
我们的一个大问题是流量。我们的平台需要大量数据，有时是大数据包。其中一些非常大，多次加载它们会更昂贵。
我已经看到很多 vue 与 vuex 的示例，但对我来说，似乎所有示例在每次分页时都会请求相同（已加载）的数据。
我真正的问题是：vuejs 或一般有没有办法避免或解决这个问题？到目前为止，我发现的唯一有用的东西是 this。
【问题讨论】：
标签： vue.js vuejs2 vuex web-traffic
据我所知，你可以使用这个库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 的第一个请求是真实的。第二个和第一个请求是缓存的，最后一个是在两秒之后，所以是真实的。
您能否更具体地说明您将如何保留缓存的上下文。什么时候需要重新加载缓存，经过多少次，在哪个事件之后，...？
【讨论】：
我使用的策略是将值存储在 Vuex 状态中。
我将所有请求都写在 Vuex 操作中。在每一个动作中，我都会检查数据是否已经存在于 Vuex 状态中。如果是这样，我只是绕过请求并从状态返回数据（避免请求被多次调用）。如果不存在，我会发出请求，然后将结果存储在 Vuex 状态中，并返回值。
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;
},
这样，用户可以随心所欲地翻页，并且每个请求只调用一次。
【讨论】：