vue3脚手架-keepalive方案

一、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)
            }
        }

    }
})