Vue3 中 keepAlive 如何搭配 VueRouter 来更自由的控制页面的状态缓存?

在 vue 中,默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。但是 vue 提供了 keep-alive 组件,它可以将一个动态组件包装起来从而实现组件切换时候保留其状态。本篇文章要介绍的并不是它的基本使用方法(这些官网文档已经写的很清楚了),而是它如何结合 VueRouter 来更自由的控制页面状态的缓存

全部缓存

我们先搭建一个 Vue 项目,里面有三个页面a,b,c,并给它们一些相互跳转的逻辑和状态

• a 页面

<template>
  <div>
    <div>A页面</div>
    <input type="text" v-model="dataA" /><br />
    <div @click="toB">跳转B</div>
    <div @click="toC">跳转C</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const dataA = ref("");
const toB = () => {
  router.push("/bb");
};
const toC = () => {
  router.push("/cc");
};
</script>

• b 页面

<template>
  <div>
    <div>B页面</div>
    <input type="text" v-model="dataB" /><br />
    <div @click="toA">跳转A</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const dataB = ref("");
const toA = () => {
  router.push("/aa");
};
</script>

• c 页面

<template>
  <div>
    <div>C页面</div>
    <input type="text" v-model="dataC" />
    <div @click="toA">跳转A</div>
  </div>
</template>

<script lang="ts" setup name="C">
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const dataC = ref("");
const toA = () => {
  router.push("/aa");
};
</script>

然后在 route/index.ts 写下它们对应的路由配置

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: RouteRecordRaw[] = [
  {
    path: "/aa",
    name: "a",
    component: () => import(/* webpackChunkName: "A" */ "../views/a.vue"),
  },
  {
    path: "/bb",
    name: "b",
    component: () => import(/* webpackChunkName: "B" */ "../views/b.vue"),
  },
  {
    path: "/cc",
    name: "c",
    component: () => import(/* webpackChunkName: "C" */ "../views/c.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

在 App.vue 中我们用 keep-alive 将 router-view 进行包裹

<template>
  <keep-alive>
    <router-view />
  </keep-alive>
</template>

启动项目,测试一下页面状态有没有被缓存

此时我们发现状态并没有缓存,并且控制台还给了个警告

上面的写法在 vue2 中是可以的,但是在 vue3 中需要将 keep-alive 写在 router-view 中才行,我们修改一下写法

<template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

这种写法其实就是 router-view 组件的插槽传递了一个带有当前组件的组件名 Component 的对象,然后用 keep-alive 包裹一个动态组件(回归原始写法)。

我们再试一下页面的缓存效果,这时候发现页面的状态被缓存了

缓存指定页面

通常情况下我们并不想将所有页面状态都缓存,而只想缓存部分页面,这样的话该怎么做呢?

其实我们可以在 template 中通过$route 获取路由的信息,所以我们可以在需要缓存的页面配置一下 meta 对象,比如 a 页面我们想缓存其状态,可以将 keepAlive 设置位 true

//route/index.ts

const routes: RouteRecordRaw[] = [
  {
    path: "/aa",
    name: "a",
    meta: {
      keepAlive: true,
    },
    component: () => import(/* webpackChunkName: "A" */ "../views/a.vue"),
  },
  ...
];

然后回到 App.vue 中判断 keepAlive 来决定是否缓存

<template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component v-if="$route.meta.keepAlive" :is="Component" />
    </keep-alive>
    <component v-if="!$route.meta.keepAlive" :is="Component" />
  </router-view>
</template>

再看下效果

此时我们发现 a 页面状态被缓存,b 页面的状态没有缓存

但是有时候我们想要这样一个效果

a 跳转 b 的时候我们需要缓存 a 页面状态,但是当 a 跳转 c 的时候我们不需要缓存 a 页面,此时我们该如何做呢?

或许有的同学想到了这样一个方法,当 a 跳转 c 的时候将 a 页面的缓存删除,这样就实现了上面的效果。可惜我找了半天也没找到 vue3 中删除指定页面缓存的方法

我也尝试过跳转 c 页面的时候将 a 的 keepAlive 设置为 false,但是再次回到 a 页面的时候 keepAlive 会重置,a 页面状态依然会被缓存。

既然如此为了做到更精细的缓存控制只有使用 keep-alive 中的 inclue 属性了

使用 inclue 控制页面缓存

keep-alive 默认会缓存内部的所有组件实例，但我们可以通过 include 来定制该行为。它的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是一个数组。这里我们使用一个数组来维护需要缓存的组件页面,注意这个数组中是组件的名字而不是路由的 name

在 vue3 中给组件命名可以这样写

<script lang='ts'>
export default {
    name: 'MyComponent',
}
</script>

但是我们通常会使用 setup 语法,这样的话我们得写两个script标签,太麻烦。我们可以使用插件vite-plugin-vue-setup-extend处理

npm i vite-plugin-vue-setup-extend -D

然后在vite.config.ts中引入这个插件就可以使用了

import { defineConfig, Plugin } from "vite";
import vue from "@vitejs/plugin-vue";
import vueSetupExtend from "vite-plugin-vue-setup-extend";

export default defineConfig({
  plugins: [vue(), vueSetupExtend()],
});

然后就可以这样命名了

<script lang="ts" setup name="A"></script>

下面我们修改一下 App.vue

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="['A']">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

这其实就代表组件名为 A 的 页面才会被缓存,接下来我们要做的就是控制这个数组来决定页面的缓存,但是这个数组要放在哪里维护呢? 答案肯定是放到全局状态管理器中拉。所以我们引入 Pinia 作为全局状态管理器

npm i pinia

在 main.ts 中注册

import { createPinia } from "pinia";
const Pinia = createPinia();
createApp(App).use(route).use(Pinia).use(RouterViewKeepAlive).mount("#app");

新建 store/index.ts

import { defineStore } from "pinia";

export default defineStore("index", {
  state: (): { cacheRouteList: string[] } => {
    return {
      cacheRouteList: [],
    };
  },
  actions: {
    //添加缓存组件
    addCacheRoute(name: string) {
      this.cacheRouteList.push(name);
    },
    //删除缓存组件
    removeCacheRoute(name: string) {
      for (let i = this.cacheRouteList.length - 1; i >= 0; i--) {
        if (this.cacheRouteList[i] === name) {
          this.cacheRouteList.splice(i, 1);
        }
      }
    },
  },
});

在 App.vue 中使用 cacheRouteList

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="catchStore.cacheRouteList">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>
<script lang="ts" setup>
import cache from "./store";
const catchStore = cache();
</script>

此时就可以根据 cacheRouteList 控制缓存页面了。

此时我们再来实现前面提到的问题a 跳转 b 的时候我们需要缓存 a 页面状态,但是当 a 跳转 c 的时候我们不需要缓存 a 页面就很简单了

import cache from "../store";
const catchStore = cache();
const router = useRouter();

const toB = () => {
  catchStore.addCacheRoute("A");
  router.push("/bb");
};
const toC = () => {
  catchStore.removeCacheRoute("A");
  router.push("/cc");
};

此时再看下页面的效果

可以发现 a 到 c 后再回来状态就重置了,这样不仅做到了上述效果,还可以让你随时随地的去删除指定组件的缓存。

到这里我们便完成了使用 inclue 对页面状态缓存进行更精细化的控制。当然,如果你有更好的方案欢迎在评论区指出,一起讨论探索