From 7217ef5a567915789a0f3e6b8ad8bde76990bb14 Mon Sep 17 00:00:00 2001
From: liangzhiyuan001 <liangzhiyuan001@chinasoftinc.com>
Date: Thu, 15 Sep 2022 14:54:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=82=E8=80=83=20https://github.com/vuejs/c?=
 =?UTF-8?q?ore/pull/4339=20=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=B0=81=E8=A3=85keep-alive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/AppMain.vue | 37 ++++++++++++++++++++++++-------
 src/store/modules/tagsView.js     | 12 +++++++++-
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 155b281..8dd1357 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,27 +1,48 @@
 <template>
   <section class="app-main">
-    <router-view v-slot="{ Component }">
+    <router-view v-slot="{ Component, route }">
       <transition name="fade-transform" mode="out-in">
-        <!-- <keep-alive :include="cachedViews"> -->
-          <component :is="Component" :key="key" />
-        <!-- </keep-alive> -->
+        <keep-alive :include="cachedViews">
+          <component :is="wrap(route, Component)" :key="route.fullPath" />
+        </keep-alive>
       </transition>
     </router-view>
   </section>
 </template>
 
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent, h } from 'vue';
 import store from '@/store';
+import { mapState } from 'pinia';
 
 export default defineComponent({
   name: 'AppMain',
   computed: {
+    ...mapState(store.tagsView, ['wrapperMap']),
     cachedViews() {
       return store.tagsView().cachedViews;
-    },
-    key() {
-      return this.$route.path;
+    }
+  },
+  methods: {
+    // 为keep-alive里的component接收的组件包上一层自定义name的壳.
+    wrap(route, component) {
+      let wrapper;
+      // 重点就是这里，这个组件的名字是完全可控的，
+      // 只要自己写好逻辑，每次能找到对应的外壳组件就行，完全可以写成任何自己想要的名字.
+      // 这就能配合 keep-alive 的 include 属性可控地操作缓存.
+      const wrapperName = route.name;
+      if (this.wrapperMap.has(wrapperName)) {
+        wrapper = this.wrapperMap.get(wrapperName);
+      } else {
+        wrapper = {
+          name: wrapperName,
+          render() {
+            return h('div', { className: 'vaf-page-wrapper' }, component);
+          }
+        };
+        this.wrapperMap.set(wrapperName, wrapper);
+      }
+      return h(wrapper);
     }
   }
 });
diff --git a/src/store/modules/tagsView.js b/src/store/modules/tagsView.js
index 6d6b0e4..4431655 100644
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@@ -2,7 +2,8 @@ import { defineStore } from 'pinia';
 
 const getDefaultState = () => ({
   visitedViews: [],
-  cachedViews: []
+  cachedViews: [],
+  wrapperMap: new Map()
 });
 
 const getters = {};
@@ -41,6 +42,9 @@ const actions = {
   delCachedView(view) {
     const index = this.cachedViews.indexOf(view.name);
     index > -1 && this.cachedViews.splice(index, 1);
+    if (this.wrapperMap.has(view.name)) {
+      this.wrapperMap.delete(view.name);
+    }
   },
 
   delOthersViews(view) {
@@ -60,6 +64,11 @@ const actions = {
       // if index = -1, there is no cached tags
       this.cachedViews = [];
     }
+    this.wrapperMap.forEach((value, key) => {
+      if (view.name !== key) {
+        this.wrapperMap.delete(key);
+      }
+    });
   },
 
   delAllViews() {
@@ -73,6 +82,7 @@ const actions = {
   },
   delAllCachedViews() {
     this.cachedViews = [];
+    this.wrapperMap.clear();
   },
 
   updateVisitedView(view) {