fix keep-alive
This commit is contained in:
parent
7217ef5a56
commit
32f6c65701
|
@ -13,12 +13,11 @@
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent, h } from 'vue';
|
import { defineComponent, h } from 'vue';
|
||||||
import store from '@/store';
|
import store from '@/store';
|
||||||
import { mapState } from 'pinia';
|
import { wrapperMap } from '@/store/modules/tagsView';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'AppMain',
|
name: 'AppMain',
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(store.tagsView, ['wrapperMap']),
|
|
||||||
cachedViews() {
|
cachedViews() {
|
||||||
return store.tagsView().cachedViews;
|
return store.tagsView().cachedViews;
|
||||||
}
|
}
|
||||||
|
@ -31,8 +30,8 @@ export default defineComponent({
|
||||||
// 只要自己写好逻辑,每次能找到对应的外壳组件就行,完全可以写成任何自己想要的名字.
|
// 只要自己写好逻辑,每次能找到对应的外壳组件就行,完全可以写成任何自己想要的名字.
|
||||||
// 这就能配合 keep-alive 的 include 属性可控地操作缓存.
|
// 这就能配合 keep-alive 的 include 属性可控地操作缓存.
|
||||||
const wrapperName = route.name;
|
const wrapperName = route.name;
|
||||||
if (this.wrapperMap.has(wrapperName)) {
|
if (wrapperMap.has(wrapperName)) {
|
||||||
wrapper = this.wrapperMap.get(wrapperName);
|
wrapper = wrapperMap.get(wrapperName);
|
||||||
} else {
|
} else {
|
||||||
wrapper = {
|
wrapper = {
|
||||||
name: wrapperName,
|
name: wrapperName,
|
||||||
|
@ -40,7 +39,7 @@ export default defineComponent({
|
||||||
return h('div', { className: 'vaf-page-wrapper' }, component);
|
return h('div', { className: 'vaf-page-wrapper' }, component);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
this.wrapperMap.set(wrapperName, wrapper);
|
wrapperMap.set(wrapperName, wrapper);
|
||||||
}
|
}
|
||||||
return h(wrapper);
|
return h(wrapper);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
|
|
||||||
|
export const wrapperMap = new Map();
|
||||||
|
|
||||||
const getDefaultState = () => ({
|
const getDefaultState = () => ({
|
||||||
visitedViews: [],
|
visitedViews: [],
|
||||||
cachedViews: [],
|
cachedViews: []
|
||||||
wrapperMap: new Map()
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const getters = {};
|
const getters = {};
|
||||||
|
@ -42,8 +43,8 @@ const actions = {
|
||||||
delCachedView(view) {
|
delCachedView(view) {
|
||||||
const index = this.cachedViews.indexOf(view.name);
|
const index = this.cachedViews.indexOf(view.name);
|
||||||
index > -1 && this.cachedViews.splice(index, 1);
|
index > -1 && this.cachedViews.splice(index, 1);
|
||||||
if (this.wrapperMap.has(view.name)) {
|
if (wrapperMap.has(view.name)) {
|
||||||
this.wrapperMap.delete(view.name);
|
wrapperMap.delete(view.name);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -64,9 +65,9 @@ const actions = {
|
||||||
// if index = -1, there is no cached tags
|
// if index = -1, there is no cached tags
|
||||||
this.cachedViews = [];
|
this.cachedViews = [];
|
||||||
}
|
}
|
||||||
this.wrapperMap.forEach((value, key) => {
|
wrapperMap.forEach((value, key) => {
|
||||||
if (view.name !== key) {
|
if (view.name !== key) {
|
||||||
this.wrapperMap.delete(key);
|
wrapperMap.delete(key);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
@ -82,7 +83,7 @@ const actions = {
|
||||||
},
|
},
|
||||||
delAllCachedViews() {
|
delAllCachedViews() {
|
||||||
this.cachedViews = [];
|
this.cachedViews = [];
|
||||||
this.wrapperMap.clear();
|
wrapperMap.clear();
|
||||||
},
|
},
|
||||||
|
|
||||||
updateVisitedView(view) {
|
updateVisitedView(view) {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user