vue keep-alive實(shí)現(xiàn)動(dòng)態(tài)緩存以及緩存銷毀

littleGrow 發(fā)布于2019-08-26 10:10 / 2464人閱讀

摘要：實(shí)現(xiàn)動(dòng)態(tài)緩存以及緩存銷毀需求來源及描述后臺(tái)管理系統(tǒng)中，左側(cè)為功能菜單欄，點(diǎn)擊菜單列表，右側(cè)顯示該菜單的功能頁面，本來是一個(gè)非常簡(jiǎn)單的后臺(tái)管理系統(tǒng)布局，現(xiàn)在增加了菜單按鈕點(diǎn)擊左側(cè)菜單欄時(shí)，右側(cè)頁面頭部顯示當(dāng)前的頁面標(biāo)題，形成一個(gè)列表，點(diǎn)擊可

vue keep-alive實(shí)現(xiàn)動(dòng)態(tài)緩存以及緩存銷毀 需求來源及描述

后臺(tái)管理系統(tǒng)中，左側(cè)為功能菜單欄，點(diǎn)擊菜單列表，右側(cè)顯示該菜單的功能頁面，本來是一個(gè)非常簡(jiǎn)單的后臺(tái)管理系統(tǒng)布局，現(xiàn)在增加了tabs菜單按鈕；
點(diǎn)擊左側(cè)菜單欄時(shí)，右側(cè)頁面頭部header顯示當(dāng)前的頁面標(biāo)題，形成一個(gè)tabs列表，點(diǎn)擊可切換頁面內(nèi)容和關(guān)閉tabs；
需求要求，點(diǎn)擊左側(cè)時(shí)，右側(cè)顯示頁面內(nèi)容，同時(shí)右側(cè)header增加該頁面的tabs，點(diǎn)擊tabs可以切換頁面，但頁面內(nèi)容不刷新，點(diǎn)擊左側(cè)菜單時(shí)，右側(cè)內(nèi)容刷新；

初步解決

第一想到的時(shí)利用vue的功能組件

此時(shí)只能實(shí)現(xiàn)緩存，但是不能根據(jù)需求實(shí)現(xiàn)動(dòng)態(tài)緩存

解決方案

利用include來判斷需要緩存的路由組件，在根據(jù)點(diǎn)擊狀態(tài)更新include

利用計(jì)算屬性和vuex獲取緩存列表


state: {
        keepAliveList:"",//保存緩存的列表
    },
    mutations: {
        setKeepAliveLists(state,arrListString){
            state.keepAliveList = arrListString;
        },
        
    }


computed:{
    keepAliveList(){
        // 獲取緩存的路由列表
        return this.$store.state.keepAliveList;
    }
}

生成緩存列表，列表的值為各組件中name的值集合拼接的字符串

this.$store.commit("setKeepAliveLists",routerComponentNameList.join())

點(diǎn)擊左側(cè)菜單欄時(shí)，更新緩存列表


handleSelect(name) {
    if(this.routerNameMap.has(name)){//如果當(dāng)前點(diǎn)擊的路由已經(jīng)在緩存列表中，則先清除緩存列表，再添加；
        this.resetKeepAive(name,this.keepAliveList);//刪除緩存路由
        this.tabChangeRoute(name);//切換路由
    } else {
        this.routerNameMap.add(name)
        this.tabChangeRoute(name);
    }
},
// 更新要緩存的路由列表
resetKeepAive(name,cacheList) {
    const conf = this.keepAliveList;
    let arr = cacheList.split(",");
    if (name && typeof name === "string") {
        let i = arr.indexOf(name);
        if (i > -1) {
            arr.splice(i, 1);
            this.$store.commit("setKeepAliveLists",arr.join());
            this.$nextTick(() => {//添加緩存路由
                this.$store.commit("setKeepAliveLists",conf);
            })
        }
    }
}

點(diǎn)擊右側(cè)tabs關(guān)閉標(biāo)簽刪除緩存

removeTab(name){
    // 點(diǎn)擊tab上的關(guān)閉按鈕，清除當(dāng)前路由的緩存
    this.routerNameMap.delete(name);
    this.resetKeepAive(name,this.keepAliveList);//刪除緩存路由
}

下面為主要代碼，監(jiān)聽當(dāng)前路由是否被移除緩存，如果移除緩存則需要銷毀該組件，否則內(nèi)容中的緩存組件會(huì)越來越來，影響使用性能；
創(chuàng)建一個(gè)mixin.js文件，然后引入到需要被動(dòng)態(tài)緩存的路由組件中即可；

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