Vue keepalive緩存清理思路

涉及知識點：vuex，mixins，keepalive，route，computed，watch

 

1./store/index.js  :

 store: 
　　　　keepAliveList:[],
 mutations: 　　setKeepAliveLists(state,keepName){ 　　　　　　state.keepAliveList.push(keepName); 　　　　}, 　　　　removeKeepAliveItem(state,keepName){ 　　　　　　state.keepAliveList.splice(state.keepAliveList.indexOf(keepName), 1) 　　　　},

 

2./components/TopWatch :(非左側標簽導航組件,點擊路由切換，可關閉)

 監聽路由變化，當其meta.keepAlive為true時將該路由的name存入keepAliveList this.$store.commit('setKeepAliveLists',storeCache);
 點擊關閉標簽時，當其meta.keepAlive為true時將該路由的name存入keepAliveList this.$store.commit('removeKeepAliveItem',storeCache);

 

3.引入mixins在需要動態銷毀的組件里，監聽store.state.keepAliveList

import mixin from '../../mixin' export default { mixins:[mixin], }

 

4.當mixins所在組件的name不存在於store.state.keepAliveList時，執行this.$destroy()

export default {

    computed: {

        keepAliveConf(){

            return this.$store.state.keepAliveList;

        }

    },

    watch:{

        keepAliveConf(e){

            // 監聽緩存列表的變化，如果緩存列表中沒有當前的路由或組件則在緩存中銷毀該實例

            let name = this.$options.name;

            if(!this.$store.state.keepAliveList.includes(name)) {

                this.$destroy()

            }

        }

    },

}

 

5.完整代碼

_1./components/ToWatch.vue

<template>
    <div class="topwatch" >

        <el-tag
            :key="index"
            v-for="(tag,index) in dynamicTags"
            closable
            :effect="tag.active?'dark':'plain'"
            :disable-transitions="false"
            @click="tapClick(tag)"
            @close="tapClose(tag)">
                {{tag.name}}
        </el-tag>

    </div>
</template>

<script>
export default {
    name:'Topwatch',
    props:{
        routerVal: Object,
    },
    computed: {
        isShow() { 
            return this.routerVal
        }
    },
    watch: {
        isShow:{ //深度監聽，可監聽到對象、數組的變化
            handler (routerVal) {
                // do something, 可使用this
                this.handleInputConfirm(routerVal);
            },
            deep:true
        }
    },
    data() {
      return {
        dynamicTags: [],
      };
    },
    methods: {
        tapClick(tag){
            this.$router.push({path:tag.path})
        },
        tapClose(tag) {
            //處理keepalive：當關閉標簽為緩存組件時，清除其在store里對應keepAliveList
            if(tag.meta.keepAlive){
                this.$store.commit('removeKeepAliveItem',tag.path.substring(1));
            }
            //當關閉標簽非第一個標簽時，跳到上一個標簽所在路由位置，防止destroy后頁面視圖還存在
            if(this.dynamicTags.indexOf(tag)-1>=0){
                let goRouter = this.dynamicTags[this.dynamicTags.indexOf(tag)-1].path;
                console.log(goRouter);
                this.$router.push({path:goRouter});
            }else{
                this.$router.push({path:"/indexdata"});
            }
            //清除標簽視圖
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        handleInputConfirm(e) {
            if(this.dynamicTags!=""){
                let routerArr = this.dynamicTags;
                for(var j in routerArr){
                    this.$set(this.dynamicTags[j],"active",false);
                }
                for(var i in routerArr){
                    if(routerArr[i].name==e.name){
                        this.$set(this.dynamicTags[i],"active",true);
                        return;
                    }
                }
            }
            let inputValue = e;
            if (inputValue) {
                this.dynamicTags.push(inputValue);
                //處理keepalive：當生成標簽為緩存組件時，添加其在store里對應keepAliveList
                if(inputValue.meta.keepAlive){
                    let storeCache = inputValue.path.substring(1);
                    this.$store.commit('setKeepAliveLists',storeCache);
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
  .topwatch{
      padding:5px 0;
  }
  .el-tag {
    margin: 5px 0px 5px 8px;
    cursor: pointer;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>

 

_2.mixin.js

export default {
    computed: {
        keepAliveConf(){
            return this.$store.state.keepAliveList;
        }
    },
    watch:{
        keepAliveConf(e){
            // 監聽緩存列表的變化，如果緩存列表中沒有當前的路由或組件則在緩存中銷毀該實例
            let name = this.$options.name;
            if(!this.$store.state.keepAliveList.includes(name)) {
                this.$destroy()
            }
        }
    },
}

 

_3.store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//創建VueX對象
const store = new Vuex.Store({
    state:{
        bgColor:'#545c64',
        textColor:'#fff',
        activeColor:'#ffd04b',
        contentBGC:'#fff',
        contentTextColor:"#222",
        keepAliveList:[],   //保存緩存的列表
    },
    mutations:{
        setKeepAliveLists(state,keepName){
            state.keepAliveList.push(keepName);
        },
        removeKeepAliveItem(state,keepName){
            state.keepAliveList.splice(state.keepAliveList.indexOf(keepName), 1)
        },
        changeColor(state,val){
            if(val==1){
                state.bgColor = '#545c64';
                state.textColor = '#fff';
                state.activeColor = '#ffd04b';
                state.contentBGC = '#fff';
                state.contentTextColor = "#222";
            }
            if(val==2){
                state.bgColor = '#fff';
                state.textColor = '#606266';
                state.activeColor = '#409EFF';
                state.contentBGC = '#fff';
                state.contentTextColor = "#222";
            }
            if(val==3){
                state.bgColor = '#333333';
                state.textColor = '#a29f9f';
                state.activeColor = '#e25132';
                state.contentBGC = '#f5f5f5';
                state.contentTextColor = "#222";
            }
            localStorage.setItem("systemColor",val)
        }
    }
})

export default store