keepAlive缓存机制重写

 <template>
 <template>
   <!-- 页面缓存 -->
   <!-- 页面缓存 -->
   <router-view v-slot="{ Component }">
   <router-view v-slot="{ Component }">
-    <keep-alive>
-      <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
+    <keep-alive :include="keepPages">
+      <component :is="Component" :key="$route.name" />
     </keep-alive>
     </keep-alive>
-    <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
   </router-view>
   </router-view>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import { mainStore } from '@/store'
+import { storeToRefs } from 'pinia'
+import { computed, ref } from 'vue';
+
+// 使用 include + pinia 状态管理动态缓存页面
+const store = mainStore()
+
+const keepPages = computed(() => {
+  return store.getKeepPages
+})
 
 
 </script>
 </script>
 
 

@@ -19,9 +19,6 @@ const emit = defineEmits(['on-click']);
 const handle = () => {
 const handle = () => {
   emit('on-click', '')
   emit('on-click', '')
 }
 }
-  onMounted(() => {
-    
-  })
 </script>
 </script>
 
 
 <script>
 <script>

@@ -36,7 +36,8 @@ export default [{
   component: () => import('./views/client/bookDetail.vue'),
   component: () => import('./views/client/bookDetail.vue'),
   meta: {
   meta: {
     title: '书籍',
     title: '书籍',
-    keepAlive: true
+    keepAlive: true,
+    name: 'bookDetail'
   },
   },
   children: []
   children: []
 }, {
 }, {
@@ -99,7 +100,8 @@ export default [{
   component: () => import('./views/client/personIndex.vue'),
   component: () => import('./views/client/personIndex.vue'),
   meta: {
   meta: {
     title: '个人首页',
     title: '个人首页',
-    keepAlive: true
+    keepAlive: true,
+    name: 'personIndex'
   },
   },
   children: []
   children: []
 }, {
 }, {
@@ -172,7 +174,8 @@ export default [{
   component: () => import('./views/me/message.vue'),
   component: () => import('./views/me/message.vue'),
   meta: {
   meta: {
     title: '我的留言',
     title: '我的留言',
-    keepAlive: true
+    keepAlive: true,
+    name: 'message'
   },
   },
   children: []
   children: []
 }, {
 }, {
@@ -181,7 +184,8 @@ export default [{
   component: () => import('./views/me/callMe.vue'),
   component: () => import('./views/me/callMe.vue'),
   meta: {
   meta: {
     title: '@我的',
     title: '@我的',
-    keepAlive: true
+    keepAlive: true,
+    name: 'callMe'
   },
   },
   children: []
   children: []
 }, {
 }, {
@@ -198,7 +202,8 @@ export default [{
   component: () => import('./views/me/unwatchList.vue'),
   component: () => import('./views/me/unwatchList.vue'),
   meta: {
   meta: {
     title: '未看作品',
     title: '未看作品',
-    keepAlive: true
+    keepAlive: true,
+    name: 'unwatchList'
   },
   },
   children: []
   children: []
 }, {
 }, {

 import { defineStore } from 'pinia';
 import { defineStore } from 'pinia';
+import _ from 'lodash';
 
 
 export const mainStore = defineStore('main', {
 export const mainStore = defineStore('main', {
   state: () => {
   state: () => {
@@ -11,9 +12,14 @@ export const mainStore = defineStore('main', {
       scrollTop: 0,
       scrollTop: 0,
       scrollTopCollection: 0,
       scrollTopCollection: 0,
       scrollTopLike: 0,
       scrollTopLike: 0,
+      keepPages: 'default', // 很坑爹，空值全部都缓存
     };
     };
   },
   },
-  getters: {},
+  getters: {
+    getKeepPages (state) {
+      return state.keepPages
+    }
+  },
   actions: {
   actions: {
     changeState (state) {
     changeState (state) {
       this.auth = state;
       this.auth = state;
@@ -33,5 +39,21 @@ export const mainStore = defineStore('main', {
     changeScrollTopLike (v) {
     changeScrollTopLike (v) {
       this.scrollTopLike = v;
       this.scrollTopLike = v;
     },
     },
+    changeKeepPages (page) { // 清空所有缓存，用一个不存在的值覆盖
+      this.keepPages = page;
+    },
+    keepThisPage (page) { // 新增缓存页
+      const arr = this.keepPages.split(",");
+      arr.push(page);
+      this.keepPages = arr + "";
+    },
+    removeThisPage (page) { // 删除缓存页
+      const arr = this.keepPages.split(",");
+      const index = arr.findIndex(x => x === page);
+      if (index > 0) {
+        arr.splice(index, 1);
+      }
+      this.keepPages = arr + "";
+    }
   },
   },
 });
 });

@@ -136,7 +136,7 @@ import no_image from '@images/que-shuju@2x.png'
 
 
 import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
 import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
 import tools from '@/common/tool'
 import tools from '@/common/tool'
-import { ref, nextTick, onActivated } from 'vue'
+import { ref, nextTick, onActivated, onMounted } from 'vue'
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import axios from '@/utils/axios';
 import axios from '@/utils/axios';
 import $ from 'jquery'
 import $ from 'jquery'
@@ -290,11 +290,13 @@ const uploadVideo = () => {
 
 
 /****************** keepAlive 模块 *******************/
 /****************** keepAlive 模块 *******************/
 
 
+// TAG: keepAlive 缓存页面
+const store = mainStore();
+store.keepThisPage($route.meta.name);
+
 onActivated(() => { // keepAlive 重置后执行回调
 onActivated(() => { // keepAlive 重置后执行回调
   // TAG: pinia应用，动态刷新数据
   // TAG: pinia应用，动态刷新数据
   // 处理数据未刷新数据显示问题
   // 处理数据未刷新数据显示问题
-  const store = mainStore()
-  // Pinia 解构方法：storeToRefs
   const { video_detail } = storeToRefs(store);
   const { video_detail } = storeToRefs(store);
   // 如果作品信息有变化及时修正
   // 如果作品信息有变化及时修正
   const arr = ref([]);
   const arr = ref([]);
@@ -325,29 +327,6 @@ onActivated(() => { // keepAlive 重置后执行回调
   document.title = $route.meta.title;
   document.title = $route.meta.title;
 });
 });
 
 
-const changeRouterKeepAlive = (path, keepAlive) => {
-  $router.options.routes.map((item) => {
-    if (item.path === path) {
-      item.meta.keepAlive = keepAlive;
-    }
-  });
-};
-
-onBeforeRouteLeave((to, from) => {
-  // 如果是从页面返回，需要重置keepAlive状态
-  // 列表页 =》 详情页
-  // TAG: keepAlive
-  if (to.path === '/client/videoDetail') {
-    changeRouterKeepAlive(from.path, true);
-  } else {
-    changeRouterKeepAlive(from.path, false);
-    // BUG: 改变keepAlive数据不刷新，只能手动刷新
-    if (to.path === '/client/chooseBook') {
-      location.reload()
-    }
-  }
-})
-
 /*********************************************************/
 /*********************************************************/
 
 
 </script>
 </script>
@@ -356,6 +335,7 @@ onBeforeRouteLeave((to, from) => {
 import mixin from 'common/mixin';
 import mixin from 'common/mixin';
 
 
 export default {
 export default {
+  name: 'bookDetail',
   mixins: [mixin.init],
   mixins: [mixin.init],
   data() {
   data() {
     return {
     return {

@@ -48,6 +48,7 @@
 
 
 <script setup>
 <script setup>
 import { useTitle } from '@vueuse/core'
 import { useTitle } from '@vueuse/core'
+import { mainStore } from '@/store'
 
 
 import Cookies from 'js-cookie'
 import Cookies from 'js-cookie'
 
 
@@ -60,7 +61,7 @@ import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
 
 
 import { bookFn } from '@/composables/useBookList.js'
 import { bookFn } from '@/composables/useBookList.js'
 
 
-import { ref, reactive, nextTick } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 import _ from 'lodash'
 import _ from 'lodash'
 import axios from '@/utils/axios';
 import axios from '@/utils/axios';
@@ -69,6 +70,10 @@ import { Toast } from 'vant'
 const $route = useRoute();
 const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
 
 
+// 删除所有的 keep-alive 缓存
+const store = mainStore()
+store.changeKeepPages('clear');
+
 // 设置页面标题
 // 设置页面标题
 useTitle($route.meta.title)
 useTitle($route.meta.title)
 
 

@@ -10,6 +10,8 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import { mainStore } from '@/store'
+
 import RightSideList from '@/components/RightSideList/index.vue'
 import RightSideList from '@/components/RightSideList/index.vue'
 
 
 import { ref } from 'vue';
 import { ref } from 'vue';
@@ -19,6 +21,10 @@ import { Toast } from 'vant';
 
 
 const $router = useRouter();
 const $router = useRouter();
 
 
+// 删除所有的 keep-alive 缓存
+const store = mainStore()
+store.changeKeepPages('clear');
+
 // 跳转幼儿园爱心书籍列表页
 // 跳转幼儿园爱心书籍列表页
 const onClick = (item) => {
 const onClick = (item) => {
   $router.push({
   $router.push({

@@ -136,11 +136,13 @@ const followUser = (status) => {
 
 
 /****************** keepAlive 模块 *******************/
 /****************** keepAlive 模块 *******************/
 
 
+// TAG: keepAlive 缓存页面
+const store = mainStore();
+store.keepThisPage($route.meta.name);
+
 onActivated(() => { // keepAlive 重置后执行回调
 onActivated(() => { // keepAlive 重置后执行回调
   // TAG: pinia应用，动态刷新数据
   // TAG: pinia应用，动态刷新数据
-  const store = mainStore()
   // 处理数据未刷新数据显示问题
   // 处理数据未刷新数据显示问题
-  // Pinia 解构方法：storeToRefs
   const { video_detail } = storeToRefs(store);
   const { video_detail } = storeToRefs(store);
   // 如果作品信息有变化及时修正
   // 如果作品信息有变化及时修正
   const arr = ref([]);
   const arr = ref([]);
@@ -152,31 +154,8 @@ onActivated(() => { // keepAlive 重置后执行回调
   })
   })
   // 触发更新
   // 触发更新
   userInfo.value.prod = arr.value;
   userInfo.value.prod = arr.value;
-  // BUG: 暂时找不到问题，只能先强制刷新，数据串了。
-  if (userInfo.value.id && userInfo.value.id !== +$route.query.perf_id) {
-    location.reload();
-  }
 });
 });
 
 
-const changeRouterKeepAlive = (path, keepAlive) => {
-  $router.options.routes.map((item) => {
-    if (item.path === path) {
-      item.meta.keepAlive = keepAlive;
-    }
-  });
-};
-
-onBeforeRouteLeave((to, from) => {
-  // 如果是从页面返回，需要重置keepAlive状态
-  // 列表页 =》 详情页
-  // TAG: keepAlive
-  if (to.path === '/client/videoDetail' && to.query.type === 'read-only') {
-    changeRouterKeepAlive(from.path, true);
-  } else {
-    changeRouterKeepAlive(from.path, false);
-  }
-})
-
 /*********************************************************/
 /*********************************************************/
 
 
 </script>
 </script>
@@ -185,6 +164,7 @@ onBeforeRouteLeave((to, from) => {
 import mixin from 'common/mixin';
 import mixin from 'common/mixin';
 
 
 export default {
 export default {
+  name: 'personIndex',
   mixins: [mixin.init],
   mixins: [mixin.init],
   data() {
   data() {
     return {
     return {

@@ -78,8 +78,7 @@ const tabClass = {
 
 
 // 处理主路由的留言数量问题
 // 处理主路由的留言数量问题
 const store = mainStore()
 const store = mainStore()
-// Pinia 解构方法：storeToRefs
-const { comment_num } = storeToRefs(store)
+const { comment_num } = storeToRefs(store);
 
 
 const videoInfo = ref('');
 const videoInfo = ref('');
 
 
@@ -121,6 +120,11 @@ const onVideoDetail = (v) => {
   // 缓存作品信息，给其他页使用
   // 缓存作品信息，给其他页使用
   store.changeVideoDetail(v);
   store.changeVideoDetail(v);
 }
 }
+
+// 删除个人首页的keep-alive缓存
+if (!$route.query.type) { // read-only 页不能删除
+  store.removeThisPage('personIndex');
+}
 </script>
 </script>
 
 
 <script>
 <script>

@@ -59,6 +59,8 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import { mainStore } from '@/store'
+
 // import icon_player from '@images/bofang@2x.png'
 // import icon_player from '@images/bofang@2x.png'
 import no_image from '@images/que-shuju@2x.png'
 import no_image from '@images/que-shuju@2x.png'
 import CommentBox from '@/components/CommentBox/index.vue'
 import CommentBox from '@/components/CommentBox/index.vue'
@@ -224,28 +226,13 @@ const onClick = (item) => {
 
 
 /****************** keepAlive 模块 *******************/
 /****************** keepAlive 模块 *******************/
 
 
+// TAG: keepAlive 缓存页面
+const store = mainStore();
+store.keepThisPage($route.meta.name);
+
 onActivated(() => { // keepAlive 重置后执行回调
 onActivated(() => { // keepAlive 重置后执行回调
 });
 });
 
 
-const changeRouterKeepAlive = (path, keepAlive) => {
-  $router.options.routes.map((item) => {
-    if (item.path === path) {
-      item.meta.keepAlive = keepAlive;
-    }
-  });
-};
-
-onBeforeRouteLeave((to, from) => {
-  // 如果是从页面返回，需要重置keepAlive状态
-  // 列表页 =》 详情页
-  // TAG: keepAlive
-  if (to.path === '/client/bookDetail') {
-    changeRouterKeepAlive(from.path, true);
-  } else {
-    changeRouterKeepAlive(from.path, false);
-  }
-})
-
 /*********************************************************/
 /*********************************************************/
 </script>
 </script>
 
 
@@ -253,6 +240,7 @@ onBeforeRouteLeave((to, from) => {
 import mixin from 'common/mixin';
 import mixin from 'common/mixin';
 
 
 export default {
 export default {
+  name: 'callMe',
   mixins: [mixin.init],
   mixins: [mixin.init],
   data () {
   data () {
     return {
     return {

@@ -70,6 +70,8 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import { mainStore } from '@/store'
+
 import icon_avatar from '@images/que-touxiang@2x.png'
 import icon_avatar from '@images/que-touxiang@2x.png'
 
 
 import MyButton from '@/components/MyButton/index.vue'
 import MyButton from '@/components/MyButton/index.vue'
@@ -83,6 +85,9 @@ import { Toast } from 'vant';
 const $route = useRoute();
 const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
 
 
+// 删除 keep-alive 缓存
+const store = mainStore();
+store.changeKeepPages('clear');
 
 
 /********** 切换用户功能 START *************/
 /********** 切换用户功能 START *************/
 
 

@@ -49,6 +49,8 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import { mainStore } from '@/store'
+
 import icon_player from '@images/bofang@2x.png'
 import icon_player from '@images/bofang@2x.png'
 import no_image from '@images/que-shuju@2x.png'
 import no_image from '@images/que-shuju@2x.png'
 import icon_avatar from '@images/que-touxiang@2x.png'
 import icon_avatar from '@images/que-touxiang@2x.png'
@@ -158,28 +160,13 @@ const deleteComment = (item) => { // 删除评论
 
 
 /****************** keepAlive 模块 *******************/
 /****************** keepAlive 模块 *******************/
 
 
+// TAG: keepAlive 缓存页面
+const store = mainStore();
+store.keepThisPage($route.meta.name);
+
 onActivated(() => { // keepAlive 重置后执行回调
 onActivated(() => { // keepAlive 重置后执行回调
 });
 });
 
 
-const changeRouterKeepAlive = (path, keepAlive) => {
-  $router.options.routes.map((item) => {
-    if (item.path === path) {
-      item.meta.keepAlive = keepAlive;
-    }
-  });
-};
-
-onBeforeRouteLeave((to, from) => {
-  // 如果是从页面返回，需要重置keepAlive状态
-  // 列表页 =》 详情页
-  // TAG: keepAlive
-  if (to.path === '/client/videoDetail') {
-    changeRouterKeepAlive(from.path, true);
-  } else {
-    changeRouterKeepAlive(from.path, false);
-  }
-})
-
 /*********************************************************/
 /*********************************************************/
 </script>
 </script>
 
 
@@ -187,6 +174,7 @@ onBeforeRouteLeave((to, from) => {
 import mixin from 'common/mixin';
 import mixin from 'common/mixin';
 
 
 export default {
 export default {
+  name: 'message',
   mixins: [mixin.init],
   mixins: [mixin.init],
   data() {
   data() {
     return {
     return {

@@ -17,6 +17,9 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import { mainStore } from '@/store'
+import { storeToRefs } from 'pinia'
+
 import no_image from '@images/que-shuju@2x.png'
 import no_image from '@images/que-shuju@2x.png'
 
 
 import { useUnwatchList } from '@/composables/useUnwatchList.js'
 import { useUnwatchList } from '@/composables/useUnwatchList.js'
@@ -24,22 +27,24 @@ import { useUnwatchList } from '@/composables/useUnwatchList.js'
 import VideoCard from '@/components/VideoCard/index.vue'
 import VideoCard from '@/components/VideoCard/index.vue'
 
 
 import { ref, onActivated, computed } from 'vue'
 import { ref, onActivated, computed } from 'vue'
-import { mainStore } from '@/store'
-import { storeToRefs } from 'pinia'
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import $ from 'jquery'
 import $ from 'jquery'
 import _ from 'lodash';
 import _ from 'lodash';
 import { wxInfo } from '@/utils/tools';
 import { wxInfo } from '@/utils/tools';
 
 
+const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
 
 
 const { onLoad, prod_list, finished, loading, finishedTextStatus, emptyStatus } = useUnwatchList();
 const { onLoad, prod_list, finished, loading, finishedTextStatus, emptyStatus } = useUnwatchList();
 
 
 /****************** keepAlive 模块 *******************/
 /****************** keepAlive 模块 *******************/
 
 
+// TAG: keepAlive 缓存页面
+const store = mainStore();
+store.keepThisPage($route.meta.name);
+
 onActivated(() => { // keepAlive 重置后执行回调
 onActivated(() => { // keepAlive 重置后执行回调
   // TAG: pinia应用，动态刷新数据
   // TAG: pinia应用，动态刷新数据
-  const store = mainStore()
   // 处理数据未刷新数据显示问题
   // 处理数据未刷新数据显示问题
   // Pinia 解构方法：storeToRefs
   // Pinia 解构方法：storeToRefs
   const { video_detail } = storeToRefs(store);
   const { video_detail } = storeToRefs(store);
@@ -70,25 +75,6 @@ onActivated(() => { // keepAlive 重置后执行回调
   }
   }
 });
 });
 
 
-const changeRouterKeepAlive = (path, keepAlive) => {
-  $router.options.routes.map((item) => {
-    if (item.path === path) {
-      item.meta.keepAlive = keepAlive;
-    }
-  });
-};
-
-onBeforeRouteLeave((to, from) => {
-  // 如果是从页面返回，需要重置keepAlive状态
-  // 列表页 =》 详情页
-  // TAG: keepAlive
-  if (to.path === '/client/videoDetail' && to.query.type === 'read-only') {
-    changeRouterKeepAlive(from.path, true);
-  } else {
-    changeRouterKeepAlive(from.path, false);
-  }
-})
-
 /*********************************************************/
 /*********************************************************/
 
 
 </script>
 </script>
@@ -97,6 +83,7 @@ onBeforeRouteLeave((to, from) => {
 import mixin from 'common/mixin';
 import mixin from 'common/mixin';
 
 
 export default {
 export default {
+  name: 'unwatchList',
   mixins: [mixin.init],
   mixins: [mixin.init],
   data() {
   data() {
     return {
     return {