- A+
在 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 对页面状态缓存进行更精细化的控制。当然,如果你有更好的方案欢迎在评论区指出,一起讨论探索
