vuex 监听异步

src/layout/components/AppMain.vue

 <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:[]
     }
   }
 }

src/layout/components/TagsView/index.vue

@@ -59,6 +59,8 @@
     },
     watch: {
       $route() {
+        this.$store.commit('tagsView/setKey', this.$route.name)
+
         this.addTags()
         this.moveToCurrentTag()
       },

src/store/modules/tagsView.js

 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(
@@ -63,7 +67,7 @@ const mutations = {
       }
     }
   },
-  
+
   DEL_RIGHT_VIEWS: (state, view) => {
     const index = state.visitedViews.findIndex(v => v.path === view.path)
     if (index === -1) {
@@ -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])
     })
   },