在本地缓存部分变动频率极低的数据,可以有效提高页面的响应速度,但需要注意不能长期保存否则会与实际产生偏差
const copyObj = (body) => JSON.parse(JSON.stringify(body))
对一个对象进行克隆,目的是让他们的引用脱钩,防止在 a = b 之后修改a导致b的变化。
export const getCache = ({cacheObj, key, requestMethod, force = false, useCache, saveCache, loadCache}) => {
const cache = cacheObj[key]
//当缓存中有数据,且不是强制模式,且useCache判断数据可用时,返回缓存中的数据
if (!force && cache && (!useCache || useCache(cache))) {
console.log("从缓存读取数据 " + key)
const body = copyObj(loadCache ? loadCache(cache) : cache);
return new Promise((r) => r(body))
}
//否则发送网络请求,请求成功后将数据保存到缓存对象中
return requestMethod().then(body => {
console.log("数据写入缓存 " + key)
if (saveCache) {
saveCache(cacheObj, key, body)
} else {
cacheObj[key] = body
}
return copyObj(body);
})
}
缓存保存和提取的方法,基本流程:当执行本方法时,先检查保存缓存数据的对象,看是否存在先前缓存的数据,缓存的数据是否过期,如果符合要求的话则直接从中取出数据返回;如果不符合要求则发送网络请求获取一份新数据,成功获取数据之后保存到缓存对象中。
方法参数含义:
export const getCacheByTime = ({cacheObj, key, requestMethod, force = false, seconds}) => {
const now = Math.floor(new Date().getTime() / 1000)
return getCache({
cacheObj, key, requestMethod, force,
useCache: (cache) => now - cache.time < seconds,
saveCache: (cacheObj, key, body) => cacheObj[key] = {data: body, time: now},
loadCache: (cache) => cache.data,
})
}
这里直接调用了核心方法,但是对参数进行了精简。cacheObj, key, requestMethod, force,原样传递,但是配置了 useCache, saveCache, loadCache 三个方法。
参数含义:
在Vuex中使用该方法:
state: {
cache:{},
},
actions: {
getDetail: ({dispatch, commit, state}, {uuid, force}) => {
return getCacheByTime({
cacheObj: state.cache, force,
key: `设备详情 ${uuid}`,
seconds: 60,
requestMethod: () => getDeviceInventoryDetail(uuid)
})
},
}
在vue组件中使用该Vuex方法
import {mapActions} from "vuex";
methods: {
...mapActions('Device', ['getDetail']),
test(){
this.getDetail(uuid).then(res=>{
//xxxxxxxx
})
},
}
一般来说,当执行了任何的 增、删、改操作之后就应该刷新(清空)缓存,否则前端显示数据会与实际不一致,可以在 vuex 的 mutations 字段里定义一个清空方法 ,在增删改请求成功后调用即可