VUE keepAlive缓存问题之动态使用exclude(会使用到VUEX)

exclude是啥?

官方解释：

怎么用呢？

处理的问题是什么？(答:返回首页的时候清除B页面的缓存)

我遇到的问题是：

一开始状态:A（首页）、 B（列表）、C（列表中的详情）三个页面，设置B页面的keepAlive为true；

操作顺序：A＝》B(1)＝》C＝》B＝》A＝》B＝》 C＝》B(4)

此时,最后一个B(4)页面出现了B(2)中的缓存数据?(bug)

可是我已经清除缓存了,为啥还会这样?

处理方法:

(1)使用vueX存储全局变量;

store.js

 1 import Vue from 'vue';
 2 import Vuex from 'vuex';
 3 import user from './store/user.js'
 4 Vue.use(Vuex);
 5
 7 export default new Vuex.Store({
 8     modules: {
 9       user
10     },
11     state: {
12         excludeXjlistpage:""
13     },
14     mutations: {
15         changeExclude(state,data){
16             state.excludePage= data ;//data就是需要清除缓存的页面的name
17   } 
18  }, 
19 });

APP.vue

<template>
        <div>
            <keep-alive :exclude="this.$store.state.excludePage">
                <router-view v-if="$route.meta.keepAlive" ></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
        </div>
</template>

B页面

 1 beforeRouteEnter(to, from, next) {
 2     next((vm) => {
 3       if(from.name == "A页面name"){
 4         vm.$store.commit('changeExclude','')//changeExclude是事件,''是传进去的参数,store.js中的data
 5       }
 6     });
 7   },
 8   beforeRouteLeave(to, from, next) {
 9     if (to.name == "A页面name") {
10       this.$store.commit('changeExclude','B页面的name')
11     }
12     next();
13   },

别忘了在router.js中设置keepAlive为true

记录一下花了我好久好久四处询问总结处理的问题,希望也对你有帮助.