vue3 keep-alive实现tab页面缓存功能

import { ref, nextTick, watch } from 'vue'
import store from '../store'

const caches = ref<string[]>([])
let collect = false

export default function useRouteCache() {
  const route = store.state

  // 收集当前路由相关的缓存
  function collectRouteCaches() {
    route.visitedView.forEach((routeMatch) => {
      const componentName: any = routeMatch?.name

      // 已打开的路由组件添加到缓存
      if (!componentName) {
        return
      }
      addCache(componentName)
    })
  }

  // 收集缓存（通过监听）
  function collectCaches() {
    if (collect) {
      return
    }
    collect = true
    watch(() => route.path, collectRouteCaches, {
      immediate: true
    })
  }

  // 添加缓存的路由组件
  function addCache(componentName: string | string[]) {
    if (Array.isArray(componentName)) {
      componentName.forEach(addCache)
      return
    }

    if (!componentName || caches.value.includes(componentName)) return
    caches.value.push(componentName)
  }

  // 移除缓存的路由组件
  function removeCache(componentName: string | string[]) {
    if (Array.isArray(componentName)) {
      componentName.forEach(removeCache)
      return
    }

    const index = caches.value.indexOf(componentName)
    //
    if (index > -1) {
      return caches.value.splice(index, 1)
    }
  }

  // 移除缓存的路由组件的实例
  async function removeCacheEntry(componentName: string) {
    if (removeCache(componentName)) {
      await nextTick()
      addCache(componentName)
    }
  }

  return {
    collectCaches,
    caches,
    addCache,
    removeCache,
    removeCacheEntry
  }
}

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="caches" :max="10">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import useRouteCache from './hooks/useRouteCache'
export default defineComponent({
  name: 'Main',
  setup() {
    const { caches } = useRouteCache()
    // 收集已打开路由tabs的缓存
    const { collectCaches } = useRouteCache()
    onMounted(collectCaches)

    return {
      caches
    }
  }
})
</script>

watch: {
      const findItem: any = this.state.visitedView.find(
        (it) => it.name === newVal.name
      )
      if (
        findItem &&
        newVal.name === findItem?.name &&
        newVal.fullPath !== findItem?.fullPath
      ) {
        // 同一个路由，但是新旧路径不同时，需要清除路由缓存。例如route.path配置为 '/detail/:id'时路径会不同
        removeCacheEntry(newVal.name)
      } else {
        addCache(newVal.name)
      }
    }
  }

removeTab(name) {
      const findItem: any = this.state.visitedView.find(
        (it) => it.fullPath === name
      )
      if (findItem) {
        store.removeVisitedView(findItem).then((_) => {
          if (this.currentTab === name) {
            this.currentTab =
              this.state.visitedView[this.state.visitedView.length - 1].fullPath
            this.$router.push(this.currentTab)
          }
        })
        // 同时移除tab缓存
        removeCache(findItem.name || '')
      }
    }