Commit 3bf0fefb authored by 李苏's avatar 李苏 💬

vuex 监听异步

parent 4799ef94
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<keep-alive v-if="cachedViews.includes(key)" >
<router-view :key="key" />
<keep-alive >
<template v-show="isCache" >
<router-view />
</template>
</keep-alive>
<router-view v-else :key="key" />
</transition>
<router-view v-if="!isCache" />
</section>
</template>
......@@ -16,9 +18,59 @@ export default {
cachedViews() {
return this.$store.state.tagsView.cachedViews
},
key() {
console.log(this.$route.name)
return this.$route.name
},
watch:{
cachedViews(val){
this.JSONcachedViews=JSON.stringify(val)
},
JSONcachedViews(nv,ov){
let nvobj=JSON.parse(nv)
let ovobj=JSON.parse(ov)
this.oldCachedViews=ovobj
if(nvobj.length>ovobj.length){
this.addBz=true
}else{
this.addBz=false
}
},
$route(val){
// console.log(this.isCache)
// debugger
this.isCache=true
this.key=val.name
if(this.addBz){
if(this.oldCachedViews.includes(val.name)){
this.isCache=true
}else{
this.isCache=false
}
// if(this.oldCachedViews.includes(val.name)){
// this.isCache=true
// }else{
// this.isCache=false
// }
this.addBz=false
}else{
// this.isCache=true
if(this.cachedViews.includes(val.name)){
console.log('包含,进入缓存')
this.isCache=true
}else{
console.log('不包含,不进入缓存')
this.isCache=false
}
// this.isCache=this.cachedViews.includes(val.name)
}
}
},
data(){
return{
isCache:true,
JSONcachedViews:'',
addBz:false,
key:null,
oldCachedViews:[]
}
}
}
......
......@@ -59,6 +59,8 @@
},
watch: {
$route() {
this.$store.commit('tagsView/setKey', this.$route.name)
this.addTags()
this.moveToCurrentTag()
},
......
const state = {
visitedViews: [],
cachedViews: []
cachedViews: [],
key:null
}
const mutations = {
setKey:(state, name)=>{
state.key=name||null
},
ADD_VISITED_VIEW: (state, view) => {
if (state.visitedViews.some(v => v.path === view.path)) return
state.visitedViews.push(
......@@ -130,6 +134,7 @@ const actions = {
delCachedView({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_CACHED_VIEW', view)
console.log(view.name,'当前清除缓存的view')
resolve([...state.cachedViews])
})
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment