一、keep-alive
在项目中,有一些页面需要缓存,我们首先想到了keep-alive
keep-alive是Vue提供的一个抽象组件,主要用于保留组件状态或避免重新渲染。
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁他们。
和<transition>
相似, <keep-alive>
是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件链中。
二、问题
1、实现缓存
keep-alive
会把其包裹的所有组件都缓存起来。
em…怎么办呢,我们只是需要让列表页缓存啊.
我们可以把需求拆分为2步
(1) 把需要缓存和不需要缓存的组件区分开,在组件的路由配置的元信息,meta中定义哪些需要缓存哪些不需要缓存
const manageCustomers = [
{
path: '/manageCustomersList',
meta: {title: '客户管理列表', keepAlive: true, keepAlivePages: ['manageCustomersDetail','manageCustomersSearch']},
component: () => import('@/views/manageCustomers/list.vue'),
name: 'manageCustomersList'
},
{
path: '/manageCustomersDetail',
meta: {title: '客户管理详情', keepAlive: false},
component: () => import('@/views/manageCustomers/detail.vue'),
name: 'manageCustomersDetail'
},
{
path: '/editContactPerson',
meta: {title: '选择客户联系人', keepAlive: false},
component: () => import('@/views/manageCustomers/components/editContactPerson.vue'),
name: 'manageContactPerson'
},]
(2) 开始按需缓存组件
我们从官方文档提供的 api 入手,
keep-alive组件如果设置了 include ,就只有和 include 匹配的组件会被缓存,
所以思路就是,动态修改 include 数组来实现按需缓存。
<div class="content-box">
<RouterView v-slot="{ Component }" class="routerView-box">
<keep-alive :include="keepAliveComponents" :max="10">
<component :is="Component" />
</keep-alive>
</RouterView>
</div>
import { keepAliveStore } from '@/stores/keepAliveStore'
const keepStore = keepAliveStore();
const keepAliveComponents = keepStore.getKeepAliveComponents
在进入路由之前判断keep-alive
是否为true
,如果为true
,则将组件的name
放入keepAliveComponents
中,并且做去重判断
router.beforeEach((to, from: any, next: (arg0?: string | undefined) => void) => {
...
// 加入缓存队列
if (meta.keepAlive) {
keepStore.setKeepAlive(to.name)
}
}
2、实现同一目标页面不同原页面动态缓存
要实现从首页进入列表页不缓存,从详情页返回列表页缓存。即同一个页面有时需要缓存,有时不需要缓存,如何解决呢?
我们利用全局后置路由守卫router.afterEach
,当我们从列表页进入首页时,将列表页从getKeepAliveComponents
中清除掉,从详情页进入首页时,保持缓存状态。给列表页的mate中加一个参数keepAlivePages
,将详情页放进入,判断如果接下来要去的页面是首页,不在参数中keepAlivePages
,则清除
router.afterEach((to, from) => {
const keepStore = keepAliveStore()
// 如果配置了目标缓存,即:目标页面不在目标缓存中,移除当前页面缓存
if (from.meta.keepAlivePages) {
const pages = from.meta.keepAlivePages || [] as any
const result = pages.indexOf(to.name)
if (result == -1) {
keepStore.removeKeepAlive(from.name)
}
}
})
3、实现同一目标、原页面动态缓存
此刻又有一个场景,我们从详情页面删除数据后,返回列表页面是需要刷新列表页的把,此刻列表页在缓存中,无法重新获取数据,可以在删除之后调用删除方法,将当前页面移除缓存
import { keepAliveStore } from "@/stores/keepAliveStore";
const keepStore = keepAliveStore();
keepStore.removeKeepAlive("manageCustomersList");
辅助文件: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)
}
}
}
})