vue3 keepAlive缓存指定组件实现

最近遇到的实际应用场景：最外层的列表页需要缓存用户的筛选条件，最开始想到的就是使用keepAlive缓存组件，但是不能简单的外层套一个keepAlive,这样会使每个页面组件都缓存，但是当用户点击菜单时需要移除组件的缓存状态。这就是需要借助官方提供的两个 include实现，通过pinia管理需要缓存的组件，下面直接上代码

<!--App.vue-->
<router-view v-slot="{ Component }">
    <keep-alive :include="useCacheComponents.cacheComponents" :max="2">
         <component :is="Component" :key="route.fullPath"/>
     </keep-alive>
</router-view>

/*pinia*/
import {defineStore} from "pinia";
import type {RouteLocationNormalized} from "vue-router";

export const useCacheComponentsStore = defineStore('useCacheComponents', () => {
    const cacheComponents = ref<string[]>([])
    //添加缓存组件
    const addCacheComponents = (to: RouteLocationNormalized) => {
        if (to.meta.keepAlive) {
            for (let item of to.matched) {
                if (!(item.components?.default as any).name || cacheComponents.value.includes((item.components?.default as any).name)) return;
                cacheComponents.value.push((item.components?.default as any).name)
            }
        }
    }
    //移除指定组件
    const removeCacheComponent = (name: string) => {
        if (name === '' || name === null) return;
        cacheComponents.value = cacheComponents.value.filter(item => item !== name)
    }
    //清空缓存组件
    const clearCacheComponents = () => {
        cacheComponents.value.length = 0
    }
    return {
        cacheComponents,
        clearCacheComponents,
        removeCacheComponent,
        addCacheComponents
    }
})

在App.vue里面使用：

import {RouterView, useRouter} from "vue-router";
import {useCacheComponentsStore} from "@/stores/cacheComponents";
const router = useRouter()
const user = useUserinfoStore()
const useCacheComponents = useCacheComponentsStore()

router.beforeResolve((to) => {
  useCacheComponents.addCacheComponents(to)
})

当用户点击菜单时，调用clearCacheComponents方法即可，记得在router里面添加keepAlive属性，在store里面是通过meta.keepAlive来判断当前组件是否需要缓存，另外在需要缓存的组件里面记得设置唯一的组件名称。

defineOptions({name: '组件名称'})