1、问题描述
项目做了cache缓存,用户登录之后,会将table的列表项缓存起来,每次用户登录,会先取缓存的数据,如果没有缓存,再取代码中的数据,就导致发布项目之后,线上项目数据优先取本地缓存,导致发布后的一些数据与线上数据不一致。
2、解决思路
在用户取数据的时候,比较线上的缓存和本次更新提交的数据,如果不一致,则优先取最新提交的数据。
props.localKey 为缓存的key
proxy.$cache.getStorage(props.localKey) 为获取本地缓存的数组
props.propList 为提交的数据
const initTableColumns = () => {
if (!proxy.$cache.getStorage(props.localKey)) {
columns.value = props.propList
return
}
let diffFlag = true
let cacheColumns = proxy.$cache.getStorage(props.localKey)
if (cacheColumns.length !== props.propList.length) {
columns.value = props.propList
return
}
let cacheStrArr = cloneDeep(cacheColumns)
.map((c: any) => {
delete c.visible
return JSON.stringify(c)
})
.sort()
let propStrArr = cloneDeep(props.propList)
.map((c: any) => {
delete c.visible
return JSON.stringify(c)
})
.sort()
// 判断两个数据是否一致
for (let i = 0; i < propStrArr.length; i++) {
if (cacheStrArr[i] !== propStrArr[i]) {
diffFlag = false
}
}
columns.value = diffFlag ? cacheColumns : props.propList
}
initTableColumns()