From 8187dbff0eb5431fbb7804d6f5136b9494defc19 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sun, 29 Aug 2021 10:20:59 +0800
Subject: [PATCH] feat: add keepalive

---
 public/serverConfig.json          |  8 ++++--
 src/App.vue                       | 10 ++++----
 src/layout/components/AppMain.vue | 38 ++++++++++++++++++++++------
 src/store/modules/settings.ts     |  5 +++-
 tsconfig.json                     | 42 ++++++++++++++++++++-----------
 vite.config.ts                    | 35 +++++++++++++-------------
 6 files changed, 90 insertions(+), 48 deletions(-)

diff --git a/public/serverConfig.json b/public/serverConfig.json
index 11955daa5..e1e30f1e3 100644
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -1,12 +1,16 @@
 {
   "version": "1.0.0",
+  "keepAlive": true,
   "MapConfigure": {
     "amapKey": "97b3248d1553172e81f168cf94ea667e",
     "baiduKey": "wTHbkkEweiFqZLKunMIjcrb2RcqNXkhc",
     "options": {
       "resizeEnable": true,
-      "center": [113.6401, 34.72468],
+      "center": [
+        113.6401,
+        34.72468
+      ],
       "zoom": 12
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 93bab304d..8e7b88669 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script>
-import { ElConfigProvider } from "element-plus";
-import zhCn from "element-plus/lib/locale/lang/zh-cn";
-import en from "element-plus/lib/locale/lang/en";
+import { ElConfigProvider } from "element-plus"
+import zhCn from "element-plus/lib/locale/lang/zh-cn"
+import en from "element-plus/lib/locale/lang/en"
 export default {
   components: {
     [ElConfigProvider.name]: ElConfigProvider
@@ -17,9 +17,9 @@ export default {
     currentLocale() {
       switch (this.$storage.locale?.locale) {
         case "zh":
-          return zhCn;
+          return zhCn
         case "en":
-          return en;
+          return en
       }
     }
   }
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index b8511f227..e41bf417f 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,25 +1,47 @@
 <template>
   <section class="app-main">
-    <router-view :key="key" v-slot="{ Component }">
-      <transition appear name="fade-transform" mode="out-in">
-        <keep-alive>
-          <component :is="Component" />
-        </keep-alive>
-      </transition>
+    <router-view>
+      <template #default="{ Component, route }">
+        <transition appear name="fade-transform" mode="out-in">
+          <keep-alive v-if="keepAlive" :include="getCachedPageList">
+            <component :is="Component" :key="route.fullPath" />
+          </keep-alive>
+          <component v-else :is="Component" :key="route.fullPath" />
+        </transition>
+      </template>
     </router-view>
   </section>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import {
+  ref,
+  unref,
+  computed,
+  defineComponent,
+  onBeforeMount,
+  getCurrentInstance
+} from "vue";
 import { useRoute } from "vue-router";
+import { useSettingStoreHook } from "/@/store/modules/settings";
 export default defineComponent({
   name: "AppMain",
   setup() {
+    let vm: any;
+    const keepAlive: Boolean = ref(
+      getCurrentInstance().appContext.config.globalProperties.$config?.keepAlive
+    );
     const route = useRoute();
     const key = computed(() => route.path);
 
-    return { key };
+    const getCachedPageList = computed((): string[] => {
+      if (!unref(keepAlive)) {
+        return [];
+      }
+      return useSettingStoreHook().cachedPageList;
+    });
+
+    return { key, keepAlive, getCachedPageList };
   }
 });
 </script>
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index bb54f3071..f5cbc5375 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -5,13 +5,16 @@ import { store } from "/@/store";
 interface SettingState {
   title: string;
   fixedHeader: boolean;
+  cachedPageList: string[];
 }
 
 export const useSettingStore = defineStore({
   id: "pure-setting",
   state: (): SettingState => ({
     title: defaultSettings.title,
-    fixedHeader: defaultSettings.fixedHeader
+    fixedHeader: defaultSettings.fixedHeader,
+    // 需要开启keepalive的页面数组，里面放页面的name即可
+    cachedPageList: ["editor"]
   }),
   getters: {
     getTitle() {
diff --git a/tsconfig.json b/tsconfig.json
index 94c189bde..82d5cc035 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,27 +16,39 @@
     "baseUrl": ".",
     "allowJs": false,
     "resolveJsonModule": true, // 包含导入的模块。json的扩展
-    "lib": ["dom", "esnext"],
+    "lib": [
+      "dom",
+      "esnext"
+    ],
     "incremental": true,
     "paths": {
-      "/@/*": ["src/*"],
-      "/#/*": ["types/*"]
+      "/@/*": [
+        "src/*"
+      ],
+      "/#/*": [
+        "types/*"
+      ]
     },
-    "types": ["node", "vite/client"],
-    "typeRoots": ["./node_modules/@types/", "./types"]
+    "types": [
+      "node",
+      "vite/client"
+    ],
+    "typeRoots": [
+      "./node_modules/@types/",
+      "./types"
+    ]
   },
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
-    "tests/**/*.ts",
-    "src/utils/path.js",
-    "types/**/*.d.ts",
-    "types/**/*.ts",
-    "types/global.d.ts",
-    "types/shims-tsx.d.ts",
-    "types/shims-vue.d.ts",
-    "mock/asyncRoutes.ts"
+    "types/*.d.ts",
+    "mock/*.ts",
+    "vite.config.ts"
   ],
-  "exclude": ["node_modules", "dist", "**/*.js"]
-}
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.js"
+  ]
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 0169ae7f4..486db71d5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,29 +1,29 @@
-import { resolve } from "path";
-import { UserConfigExport, ConfigEnv } from "vite";
-import vue from "@vitejs/plugin-vue";
-import vueJsx from "@vitejs/plugin-vue-jsx";
-import { loadEnv } from "./build/utils";
-import { createProxy } from "./build/proxy";
-import { viteMockServe } from "vite-plugin-mock";
-import styleImport from "vite-plugin-style-import";
-import VitePluginElementPlus from "vite-plugin-element-plus";
+import { resolve } from "path"
+import { UserConfigExport, ConfigEnv } from "vite"
+import vue from "@vitejs/plugin-vue"
+import vueJsx from "@vitejs/plugin-vue-jsx"
+import { loadEnv } from "./build/utils"
+import { createProxy } from "./build/proxy"
+import { viteMockServe } from "vite-plugin-mock"
+import styleImport from "vite-plugin-style-import"
+import VitePluginElementPlus from "vite-plugin-element-plus"
 
 const pathResolve = (dir: string): any => {
-  return resolve(__dirname, ".", dir);
-};
+  return resolve(__dirname, ".", dir)
+}
 
-const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = loadEnv();
+const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = loadEnv()
 
 const alias: Record<string, string> = {
   "/@": pathResolve("src"),
   //解决开发环境下的警告 You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
   "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js"
-};
+}
 
-const root: string = process.cwd();
+const root: string = process.cwd()
 
 export default ({ command }: ConfigEnv): UserConfigExport => {
-  const prodMock = true;
+  const prodMock = true
   return {
     /**
      * 基本公共路径
@@ -84,6 +84,7 @@ export default ({ command }: ConfigEnv): UserConfigExport => {
       ]
     },
     build: {
+      // @ts-ignore
       sourcemap: false,
       brotliSize: false,
       // 消除打包大小超过500kb警告
@@ -92,5 +93,5 @@ export default ({ command }: ConfigEnv): UserConfigExport => {
     define: {
       __INTLIFY_PROD_DEVTOOLS__: false
     }
-  };
-};
+  }
+}