Vue3中KeepAlive的使用

  • Vue3中KeepAlive的使用已关闭评论
  • 169 次浏览
  • A+
所属分类:Web前端
摘要

  我们在开发一个功能是,经常会遇到从一个列表页面,点击列表项跳转到详情页面的需求,理想的情况下,从详情页面返回到列表页,应该回到跳转前的状态,可以继续浏览其他内容;但是在没做任何处理的情况下,返回列表页后,列表页会被刷新,回到初始的状态,这就与我们的预设不符;为了实现这样的需求,我们需要使用keep-alive组件来缓存列表页面的状态,让其不被刷新,这样就可以愉快的继续浏览啦。

  我们在开发一个功能是,经常会遇到从一个列表页面,点击列表项跳转到详情页面的需求,理想的情况下,从详情页面返回到列表页,应该回到跳转前的状态,可以继续浏览其他内容;但是在没做任何处理的情况下,返回列表页后,列表页会被刷新,回到初始的状态,这就与我们的预设不符;为了实现这样的需求,我们需要使用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>