关于vue.js:vue-keepalive-使用思路

当成笔记吧

我的项目根文件 App.vue

<template>
    <div  class="wrap">
        <keep-alive :include="cacheArr" :exclude="exclude">
            <router-view class="fadeIn"></router-view>
        </keep-alive>
    </div>
</template>

<script>
import { 
    mapGetters,
    mapMutations
}  from 'vuex';
import {cacheArr, dropConfig} from '@/commponent/KeepAlive'

export default {data(){
        return{cacheArr: cacheArr}
    },
    computed:{
        ...mapGetters('KeepAlive',['exclude'])
    },
    watch:{'$route':function (to,from) {const dropArr = dropConfig[to.name];

            if (dropArr) {
                dropArr.forEach( name => {this.drop(name); 
                });
            }
        }
    },
    created(){
        // 控制台测试 是否真的登记
       // window.drop = this.drop;
    },
    methods:{
        ...mapMutations('KeepAlive',['drop'])
    }
}
</script>

KeepAlive(全 js)

 目录
KeepAlive
      --cacheArr.js
      -dropConfig.js
      -index.js
      -store.js

vuex 模块 -store.js

const KeepAlive = {
    namespaced: true,
    strict:  process.env.NODE_ENV !== 'production',
    state: {exclude: '',},
    mutations: {drop(state,name){name = `${name},`;
            const reg = new RegExp(name,'g');

            // 外面不存在时再增加
            if(!reg.test(state.exclude)){
                state.exclude += name;
                // 利用宏工作初始化 exclude
                setTimeout(() => {state.exclude = state.exclude.replace(new RegExp(name,'g'),'');
                },0);
            }
            
        }
    },
    getters: {exclude(state){return state.exclude}
    }
}


export default KeepAlive ;

dropConfig.js 登记缓存路由配置文件

export default {
    // 路由 name- 到这个路由要登记的路由
    //key 是以后路由 
    //value 是要登记的路由
    "groupHome":[
        // 缓存的页面路由 name
        'expertHome',
        'bonusRank'
    ],
}

cacheArr.js 须要进行缓存路由配置文件

export default [
    // 哪个路由须要缓存 间接写路由 name
    'groupHome',
]

index.js 给须要缓存的组件混合一些办法

自身就是一个函数 传入以后组件，会给组件增加 mixins 来进行混合一些办法

tips: 
    this.unbind();// 忽视就好 与主题无关
    this.scrollBind(this);// 忽视就好 与主题无关
    window.scrollTop();// 获取滚动条 Y 地位
    window.scrollTotop(***);// 设置滚动条
    是我的一些外部办法
/**
 * 
 * @param {object} component 组件对象
 */

function keepAlive(component) {const scrollTop = Symbol('scrollTop');
    
    component.mixins = [{activated() {if(typeof this.unbind === 'function'){this.unbind();
                this.scrollBind(this);
            }
            
            if (typeof this[scrollTop] != "undefined") {this.$nextTick(() => {window.scrollTotop(this[scrollTop]);
                })
            }
        },
        deactivated(){if(typeof this.unbind === 'function'){this.unbind();
            }
        },
        beforeRouteLeave(to, from, next) {this[scrollTop] = window.scrollTop();
            if(typeof this.unbind === 'function'){this.unbind();
            }
            next()}
    }]
    return component;
}

export default keepAlive;

export {default as cacheArr} from './cacheArr';
export {default as dropConfig} from './dropConfig';

应用形式

<template>
    <div class="home"> 
    </div>
</template>
<script>
export default KeepAlive({name: "****",});
<script>
<style scoped>
.home{}
</style>