From d702a6703b6a19bc2b5f42196ebdce5aa8ef1926 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Tue, 11 Jul 2023 15:07:37 +0800
Subject: [PATCH] fix: keepAlive

---
 src/layout/components/AppMain.vue          | 19 ++++---------
 src/layout/components/tags/ContextMenu.vue |  9 ++----
 src/layout/components/tags/index.vue       |  3 +-
 src/store/modules/app/index.js             | 17 -----------
 src/store/modules/tags/index.js            | 33 +++++++++++++++-------
 5 files changed, 33 insertions(+), 48 deletions(-)

diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 8baa0f6..e0f9fae 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,23 +1,16 @@
 <template>
   <router-view v-slot="{ Component, route }">
-    <KeepAlive :include="keepAliveRouteNames">
-      <component
-        :is="Component"
-        v-if="appStore.reloadFlag"
-        :key="appStore.aliveKeys[route.name] || route.fullPath"
-      />
+    <KeepAlive :include="keepAliveNames">
+      <component :is="Component" v-if="!tagStore.reloading" :key="route.fullPath" />
     </KeepAlive>
   </router-view>
 </template>
 
 <script setup>
-import { useAppStore } from '@/store'
-import { useRouter } from 'vue-router'
-const appStore = useAppStore()
-const router = useRouter()
+import { useTagsStore } from '@/store'
+const tagStore = useTagsStore()
 
-const allRoutes = router.getRoutes()
-const keepAliveRouteNames = computed(() => {
-  return allRoutes.filter((route) => route.meta?.keepAlive).map((route) => route.name)
+const keepAliveNames = computed(() => {
+  return tagStore.tags.filter((item) => item.keepAlive).map((item) => item.name)
 })
 </script>
diff --git a/src/layout/components/tags/ContextMenu.vue b/src/layout/components/tags/ContextMenu.vue
index 7b69ff8..af7ac5a 100644
--- a/src/layout/components/tags/ContextMenu.vue
+++ b/src/layout/components/tags/ContextMenu.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import { useTagsStore, useAppStore } from '@/store'
+import { useTagsStore } from '@/store'
 import { renderIcon } from '@/utils'
 
 const props = defineProps({
@@ -36,7 +36,6 @@ const props = defineProps({
 const emit = defineEmits(['update:show'])
 
 const tagsStore = useTagsStore()
-const appStore = useAppStore()
 
 const options = computed(() => [
   {
@@ -78,11 +77,7 @@ const actionMap = new Map([
   [
     'reload',
     () => {
-      if (route.meta?.keepAlive) {
-        // 重置keepAlive
-        appStore.setAliveKeys(route.name, +new Date())
-      }
-      appStore.reloadPage()
+      tagsStore.reloadTag(route.path, route.meta?.keepAlive)
     },
   ],
   [
diff --git a/src/layout/components/tags/index.vue b/src/layout/components/tags/index.vue
index bd06a38..815e1e3 100644
--- a/src/layout/components/tags/index.vue
+++ b/src/layout/components/tags/index.vue
@@ -50,7 +50,8 @@ watch(
     const { name, fullPath: path } = route
     const title = route.meta?.title
     const icon = route.meta?.icon
-    tagsStore.addTag({ name, path, title, icon })
+    const keepAlive = route.meta?.keepAlive
+    tagsStore.addTag({ name, path, title, icon, keepAlive })
   },
   { immediate: true }
 )
diff --git a/src/store/modules/app/index.js b/src/store/modules/app/index.js
index f2194cc..41117f2 100644
--- a/src/store/modules/app/index.js
+++ b/src/store/modules/app/index.js
@@ -5,34 +5,17 @@ const isDark = useDark()
 export const useAppStore = defineStore('app', {
   state() {
     return {
-      reloadFlag: true,
       collapsed: false,
-      /** keepAlive路由的key，重新赋值可重置keepAlive */
-      aliveKeys: {},
       isDark,
     }
   },
   actions: {
-    async reloadPage() {
-      $loadingBar.start()
-      this.reloadFlag = false
-      await nextTick()
-      this.reloadFlag = true
-
-      setTimeout(() => {
-        document.documentElement.scrollTo({ left: 0, top: 0 })
-        $loadingBar.finish()
-      }, 100)
-    },
     switchCollapsed() {
       this.collapsed = !this.collapsed
     },
     setCollapsed(collapsed) {
       this.collapsed = collapsed
     },
-    setAliveKeys(key, val) {
-      this.aliveKeys[key] = val
-    },
     /** 设置暗黑模式 */
     setDark(isDark) {
       this.isDark = isDark
diff --git a/src/store/modules/tags/index.js b/src/store/modules/tags/index.js
index 60c2264..5d615bf 100644
--- a/src/store/modules/tags/index.js
+++ b/src/store/modules/tags/index.js
@@ -8,6 +8,7 @@ export const useTagsStore = defineStore('tag', {
     return {
       tags: tags || [],
       activeTag: activeTag || '',
+      reloading: false,
     }
   },
   getters: {
@@ -25,20 +26,32 @@ export const useTagsStore = defineStore('tag', {
       sStorage.set('tags', tags)
     },
     addTag(tag = {}) {
+      if (WITHOUT_TAG_PATHS.includes(tag.path)) return
+      let findItem = this.tags.find((item) => item.path === tag.path)
+      if (findItem) findItem = tag
+      else this.setTags([...this.tags, tag])
       this.setActiveTag(tag.path)
-      if (WITHOUT_TAG_PATHS.includes(tag.path) || this.tags.some((item) => item.path === tag.path))
-        return
-      this.setTags([...this.tags, tag])
+    },
+    async reloadTag(path, keepAlive) {
+      const findItem = this.tags.find((item) => item.path === path)
+      // 更新key可让keepAlive失效
+      if (findItem && keepAlive) findItem.keepAlive = false
+
+      $loadingBar.start()
+      this.reloading = true
+      await nextTick()
+      this.reloading = false
+      findItem.keepAlive = keepAlive
+      setTimeout(() => {
+        document.documentElement.scrollTo({ left: 0, top: 0 })
+        $loadingBar.finish()
+      }, 100)
     },
     removeTag(path) {
-      if (path === this.activeTag) {
-        if (this.activeIndex > 0) {
-          router.push(this.tags[this.activeIndex - 1].path)
-        } else {
-          router.push(this.tags[this.activeIndex + 1].path)
-        }
-      }
       this.setTags(this.tags.filter((tag) => tag.path !== path))
+      if (path === this.activeTag) {
+        router.push(this.tags[this.tags.length - 1].path)
+      }
     },
     removeOther(curPath = this.activeTag) {
       this.setTags(this.tags.filter((tag) => tag.path === curPath))