vue3笔记（33）搜索缓存

当列表项较多时，用户输入一些搜索条件、改变页数、改变页码获取到需要的搜索条目A，当对该搜索条目A进行操作（例如：编辑、查看等需要打开新页面），点击面包屑或者返回时，需要对之前的搜索项做一个缓存，以保证用户返回时能快速定位到之前的搜索条目A。
搜索缓存也遇到一些坑，本篇做一个记录。
2024.5.16更新：可以直接使用 keepAlive 组件缓存。

问题描述

列表页注入缓存，在所有涉及页面做判断是否需要去除缓存
detail.vue 页面

watch(route, () => {
  const path = route.path
  if (path.indexOf('traceChip') < 0) {
    localStorage.removeItem('traceChip')
  }
})

不足：每个页面都要判断，很麻烦。若是有新需求要增加新页面，必须要再次加上。

在列表页面做缓存

搜索后打开其他页面时，做缓存

const openLook = (index: any, row: any) => {
  localStorage.setItem(
    'traceChip',
    JSON.stringify({
      query: toRaw(dataList.query),
      queryShow: toRaw(dataList.queryShow)
    })
  )
  router.push({
    path: '/traceDetailChip',
    query: { detail: JSON.stringify(toRaw(row.id)), backUrl: 'trace' + state.productInfoType }
  })
}

页面初始化时获取缓存，赋予 query，去除缓存，这样在第一次搜索时可以调用 query。

onMounted(() => {
  const traceChip = JSON.parse(localStorage.getItem('traceChip'))
    console.log('localStorage=', traceChip)
    if (traceChip) {
      dataList.query = traceChip.query
      dataList.queryShow = traceChip.queryShow
      localStorage.removeItem('traceChip')
    }
})

KeepAlive

默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。
是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

<!-- 基础组件 -->
<component :is="activeComponent" />
<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>