线上项目缓存导致数据不一致问题解决方法

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()