Vue3中KeepAlive的使用
我们在开发一个功能是，经常会遇到从一个列表页面，点击列表项跳转到详情页面的需求，理想的情况下，从详情页面返回到列表页，应该回到跳转前的状态，可以继续浏览其他内容；但是在没做任何处理的情况下，返回列表页后，列表页会被刷新，回到初始的状态，这就与我们的预设不符；为了实现这样的需求，我们需要使用keep-alive组件来缓存列表页面的状态，让其不被刷新，这样就可以愉快的继续浏览啦。
下面就是我们使用keep-alive组件的一些步骤：（ps：项目使用vue3、vue-router、pinia、typescript）
1、声明路由的Meta扩展数据类型，用来在路由中配置哪些页面需要被缓存
router.d.ts
import "vue-router";
declare module "vue-router" {
interface RouteMeta extends MyRoute.RouteMeta {
title: string;
keepAlive?: boolean; // 该路由页面是否需要缓存
keepAlivePages?: Array<string>; // 配置需要缓存的跳回来源（从某页面回到该页面，该页面缓存，其他页面回到该页面，该页面不缓存）
canBack?: boolean; // 是否可以返回
}
}
2、配置路由信息，以文章列表和详情页面为例
分模块配置路由文件library.ts
import { RouteComponent, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
{
path: "library/list",
name: "libraryList",
meta: { title: "文章列表", keepAlive: true, keepAlivePages: ["libraryDetail"] },
component: (): RouteComponent => {
return import(/* webpackChunkName: "pages_knowledge_library" */ "@/views/pages/knowledge/library/index.vue");
}
},
{
path: "library/detail",
name: "libraryDetail",
meta: { title: "文章详情", canBack: true },
component: (): RouteComponent => {
return import(/* webpackChunkName: "pages_knowledge_library_detail" */ "@/views/pages/knowledge/library/detail.vue");
}
}
];
export default routes;
3、声明页面组件的名称，与配置的名称一致：keep-alive 组件会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 keep-alive 缓存，就必须显式声明一个 name 选项。
在 3.2.34 或以上的版本中，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，即使是在配合 <KeepAlive> 使用时也无需再手动声明。
但在项目中我们是分模版开发，业务组件文件重名的几率还是挺大的，所以我们还是需要显式声明组件的name属性。
library/index.vue
<template>
<!-- 页面模版 -->
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({ name: "libraryList" });
</script>
<script lang="ts" setup>
// 页面绑定数据
<script>library/detail.vue
<template>
<!-- 页面模版 -->
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({ name: "libraryDetail" });
</script>
<script lang="ts" setup>
// 页面绑定数据
<script>
3、定义一个Store用来缓存需要被缓存的页面集合
keepAliveStore.ts
import { defineStore } from "pinia";
export interface KeepAliveState {
keepAliveComponents: Array<any>;
}
export const keepAliveStore = defineStore("keepAlive", {
state: (): KeepAliveState => {
return {
keepAliveComponents: []
};
},
getters: {
getKeepAliveComponents(state) {
return state.keepAliveComponents;
}
},
actions: {
// 加入到缓存队列
setKeepAlive(component: any) {
if (!this.keepAliveComponents.includes(component)) {
this.keepAliveComponents.push(component);
}
},
// 从缓存队列移除
removeKeepAlive(component: any) {
const index = this.keepAliveComponents.indexOf(component);
if (index !== -1) {
this.keepAliveComponents.splice(index, 1);
}
}
}
});4、路由守卫处理：在路由进入之前读取Meta扩展数据，如果配置了缓存，就加入到缓存队列中；在路由离开之前判断目标路由的Meta扩展数据，如果该页面与配置的来源页面不匹配，则将目标路由从缓存队列中移除
router/index.ts
const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
routes
});
// --- beforeRouter --- //
router.beforeEach((to, _from, next) => {
const { KeepAliveStore } = usePiniaStore();
const meta = to.meta || {};
// 加入缓存队列
if (meta.keepAlive) {
KeepAliveStore.setKeepAlive(to.name);
}
// 做一些其他的事情
});
// ---afterRouter --- //
router.afterEach((to, from) => {
const { KeepAliveStore } = usePiniaStore();
// 如果配置了目标缓存，即：目标页面不在目标缓存中，移除当前页面缓存
if (from.meta.keepAlivePages) {
if (from.meta.keepAlivePages.indexOf(to.name as string) == -1) {
KeepAliveStore.removeKeepAlive(from.name);
}
}
// 做一些其他的事情
});
5、keep-alive组件的使用：取出缓存队列中的集合，配置给include属性，keep-alive组件便能把配置的路由页面给缓存起来了；同时也可以设置max最大缓存数，避免缓存太多导致性能下降
RouterView.vue
<template>
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in" appear>
<keep-alive :include="keepAliveComponents" :max="10">
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
</template>
<script lang="ts" setup>
import { usePiniaStore } from "@/store";
const { KeepAliveStore } = usePiniaStore();
const keepAliveComponents = KeepAliveStore.getKeepAliveComponents;
</script>