Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
32d84280 1 parent 9ea2c4f8

keepAlive缓存机制重写

Inline Side-by-side
Showing 13 changed files with 102 additions and 126 deletions
<template>
<!-- 页面缓存 -->
<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>
<component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
</router-view>
</template>
<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>
......
......@@ -19,9 +19,6 @@ const emit = defineEmits(['on-click']);
const handle = () => {
emit('on-click', '')
}
onMounted(() => {
})
</script>
<script>
......
......@@ -36,7 +36,8 @@ export default [{
component: () => import('./views/client/bookDetail.vue'),
meta: {
title: '书籍',
keepAlive: true
keepAlive: true,
name: 'bookDetail'
},
children: []
}, {
......@@ -99,7 +100,8 @@ export default [{
component: () => import('./views/client/personIndex.vue'),
meta: {
title: '个人首页',
keepAlive: true
keepAlive: true,
name: 'personIndex'
},
children: []
}, {
......@@ -172,7 +174,8 @@ export default [{
component: () => import('./views/me/message.vue'),
meta: {
title: '我的留言',
keepAlive: true
keepAlive: true,
name: 'message'
},
children: []
}, {
......@@ -181,7 +184,8 @@ export default [{
component: () => import('./views/me/callMe.vue'),
meta: {
title: '@我的',
keepAlive: true
keepAlive: true,
name: 'callMe'
},
children: []
}, {
......@@ -198,7 +202,8 @@ export default [{
component: () => import('./views/me/unwatchList.vue'),
meta: {
title: '未看作品',
keepAlive: true
keepAlive: true,
name: 'unwatchList'
},
children: []
}, {
......
import { defineStore } from 'pinia';
import _ from 'lodash';
export const mainStore = defineStore('main', {
state: () => {
......@@ -11,9 +12,14 @@ export const mainStore = defineStore('main', {
scrollTop: 0,
scrollTopCollection: 0,
scrollTopLike: 0,
keepPages: 'default', // 很坑爹，空值全部都缓存
};
},
getters: {},
getters: {
getKeepPages (state) {
return state.keepPages
}
},
actions: {
changeState (state) {
this.auth = state;
......@@ -33,5 +39,21 @@ export const mainStore = defineStore('main', {
changeScrollTopLike (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 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 axios from '@/utils/axios';
import $ from 'jquery'
......@@ -290,11 +290,13 @@ const uploadVideo = () => {
/****************** keepAlive 模块 *******************/
// TAG: keepAlive 缓存页面
const store = mainStore();
store.keepThisPage($route.meta.name);
onActivated(() => { // keepAlive 重置后执行回调
// TAG: pinia应用，动态刷新数据
// 处理数据未刷新数据显示问题
const store = mainStore()
// Pinia 解构方法：storeToRefs
const { video_detail } = storeToRefs(store);
// 如果作品信息有变化及时修正
const arr = ref([]);
......@@ -325,29 +327,6 @@ onActivated(() => { // keepAlive 重置后执行回调
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>
......@@ -356,6 +335,7 @@ onBeforeRouteLeave((to, from) => {
import mixin from 'common/mixin';
export default {
name: 'bookDetail',
mixins: [mixin.init],
data() {
return {
......
......@@ -48,6 +48,7 @@
<script setup>
import { useTitle } from '@vueuse/core'
import { mainStore } from '@/store'
import Cookies from 'js-cookie'
......@@ -60,7 +61,7 @@ import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
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 _ from 'lodash'
import axios from '@/utils/axios';
......@@ -69,6 +70,10 @@ import { Toast } from 'vant'
const $route = useRoute();
const $router = useRouter();
// 删除所有的 keep-alive 缓存
const store = mainStore()
store.changeKeepPages('clear');
// 设置页面标题
useTitle($route.meta.title)
......
......@@ -10,6 +10,8 @@
</template>
<script setup>
import { mainStore } from '@/store'
import RightSideList from '@/components/RightSideList/index.vue'
import { ref } from 'vue';
......@@ -19,6 +21,10 @@ import { Toast } from 'vant';
const $router = useRouter();
// 删除所有的 keep-alive 缓存
const store = mainStore()
store.changeKeepPages('clear');
// 跳转幼儿园爱心书籍列表页
const onClick = (item) => {
$router.push({
......
......@@ -136,11 +136,13 @@ const followUser = (status) => {
/****************** keepAlive 模块 *******************/
// TAG: keepAlive 缓存页面
const store = mainStore();
store.keepThisPage($route.meta.name);
onActivated(() => { // keepAlive 重置后执行回调
// TAG: pinia应用，动态刷新数据
const store = mainStore()
// 处理数据未刷新数据显示问题
// Pinia 解构方法：storeToRefs
const { video_detail } = storeToRefs(store);
// 如果作品信息有变化及时修正
const arr = ref([]);
......@@ -152,31 +154,8 @@ onActivated(() => { // keepAlive 重置后执行回调
})
// 触发更新
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>
......@@ -185,6 +164,7 @@ onBeforeRouteLeave((to, from) => {
import mixin from 'common/mixin';
export default {
name: 'personIndex',
mixins: [mixin.init],
data() {
return {
......
......@@ -78,8 +78,7 @@ const tabClass = {
// 处理主路由的留言数量问题
const store = mainStore()
// Pinia 解构方法：storeToRefs
const { comment_num } = storeToRefs(store)
const { comment_num } = storeToRefs(store);
const videoInfo = ref('');
......@@ -121,6 +120,11 @@ const onVideoDetail = (v) => {
// 缓存作品信息，给其他页使用
store.changeVideoDetail(v);
}
// 删除个人首页的keep-alive缓存
if (!$route.query.type) { // read-only 页不能删除
store.removeThisPage('personIndex');
}
</script>
<script>
......
......@@ -59,6 +59,8 @@
</template>
<script setup>
import { mainStore } from '@/store'
// import icon_player from '@images/bofang@2x.png'
import no_image from '@images/que-shuju@2x.png'
import CommentBox from '@/components/CommentBox/index.vue'
......@@ -224,28 +226,13 @@ const onClick = (item) => {
/****************** keepAlive 模块 *******************/
// TAG: keepAlive 缓存页面
const store = mainStore();
store.keepThisPage($route.meta.name);
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>
......@@ -253,6 +240,7 @@ onBeforeRouteLeave((to, from) => {
import mixin from 'common/mixin';
export default {
name: 'callMe',
mixins: [mixin.init],
data () {
return {
......
......@@ -70,6 +70,8 @@
</template>
<script setup>
import { mainStore } from '@/store'
import icon_avatar from '@images/que-touxiang@2x.png'
import MyButton from '@/components/MyButton/index.vue'
......@@ -83,6 +85,9 @@ import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();
// 删除 keep-alive 缓存
const store = mainStore();
store.changeKeepPages('clear');
/********** 切换用户功能 START *************/
......
......@@ -49,6 +49,8 @@
</template>
<script setup>
import { mainStore } from '@/store'
import icon_player from '@images/bofang@2x.png'
import no_image from '@images/que-shuju@2x.png'
import icon_avatar from '@images/que-touxiang@2x.png'
......@@ -158,28 +160,13 @@ const deleteComment = (item) => { // 删除评论
/****************** keepAlive 模块 *******************/
// TAG: keepAlive 缓存页面
const store = mainStore();
store.keepThisPage($route.meta.name);
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>
......@@ -187,6 +174,7 @@ onBeforeRouteLeave((to, from) => {
import mixin from 'common/mixin';
export default {
name: 'message',
mixins: [mixin.init],
data() {
return {
......
......@@ -17,6 +17,9 @@
</template>
<script setup>
import { mainStore } from '@/store'
import { storeToRefs } from 'pinia'
import no_image from '@images/que-shuju@2x.png'
import { useUnwatchList } from '@/composables/useUnwatchList.js'
......@@ -24,22 +27,24 @@ import { useUnwatchList } from '@/composables/useUnwatchList.js'
import VideoCard from '@/components/VideoCard/index.vue'
import { ref, onActivated, computed } from 'vue'
import { mainStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import $ from 'jquery'
import _ from 'lodash';
import { wxInfo } from '@/utils/tools';
const $route = useRoute();
const $router = useRouter();
const { onLoad, prod_list, finished, loading, finishedTextStatus, emptyStatus } = useUnwatchList();
/****************** keepAlive 模块 *******************/
// TAG: keepAlive 缓存页面
const store = mainStore();
store.keepThisPage($route.meta.name);
onActivated(() => { // keepAlive 重置后执行回调
// TAG: pinia应用，动态刷新数据
const store = mainStore()
// 处理数据未刷新数据显示问题
// Pinia 解构方法：storeToRefs
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>
......@@ -97,6 +83,7 @@ onBeforeRouteLeave((to, from) => {
import mixin from 'common/mixin';
export default {
name: 'unwatchList',
mixins: [mixin.init],
data() {
return {
......