Merge pull request #1 from midfar/keep-alive

Keep alive

src/layout/components/AppMain.vue

@@ -1,27 +1,47 @@
 <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 { wrapperMap } from '@/store/modules/tagsView';
 
 export default defineComponent({
   name: 'AppMain',
   computed: {
     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 (wrapperMap.has(wrapperName)) {
+        wrapper = wrapperMap.get(wrapperName);
+      } else {
+        wrapper = {
+          name: wrapperName,
+          render() {
+            return h('div', { className: 'vaf-page-wrapper' }, component);
+          }
+        };
+        wrapperMap.set(wrapperName, wrapper);
+      }
+      return h(wrapper);
     }
   }
 });

src/store/modules/tagsView.js

@@ -1,5 +1,7 @@
 import { defineStore } from 'pinia';
 
+export const wrapperMap = new Map();
+
 const getDefaultState = () => ({
   visitedViews: [],
   cachedViews: []
@@ -41,6 +43,9 @@ const actions = {
   delCachedView(view) {
     const index = this.cachedViews.indexOf(view.name);
     index > -1 && this.cachedViews.splice(index, 1);
+    if (wrapperMap.has(view.name)) {
+      wrapperMap.delete(view.name);
+    }
   },
 
   delOthersViews(view) {
@@ -60,6 +65,11 @@ const actions = {
       // if index = -1, there is no cached tags
       this.cachedViews = [];
     }
+    wrapperMap.forEach((value, key) => {
+      if (view.name !== key) {
+        wrapperMap.delete(key);
+      }
+    });
   },
 
   delAllViews() {
@@ -73,6 +83,7 @@ const actions = {
   },
   delAllCachedViews() {
     this.cachedViews = [];
+    wrapperMap.clear();
   },
 
   updateVisitedView(view) {