遇到的问题
先说在使用 keep-aclive 遇到的坑，我一开始在router.js里把次路由用keepAlive直接缓存，设置keepAlive为true，请看下图, 这么写发现一个问题，我第一次进入到该页面的时候用户信息缓存的对的，但我切换账号的后，再次进入此页面的时候 发现还是上次的用户信息，我的用户信息是在header组件里面写的, 需要强制刷新一下才能显示正确的用户信息，我已经在退出登录的时候使用 this.$destroy() 销毁实力清除了组件缓存，但是还是会出现此问题，求解
一开始在router.js 里面设置keepAlive:true, 这样会出现上述问题
export default new Router({
routes: [{
path: '/buyClassReturnMoney',
meta: {
title: '购课',
keepAlive: true, // 是否缓存
},
component: resolve => require(['../views/worker/workOrder/buyClassReturnMoney.vue'], resolve)
}]
})
解决方案
使用 include 按需缓存(动态缓存组件)
include是需要缓存的组件
扩展：exclude是除了某些组件都缓存
需要注意的是：buyClassReturnMoney 是要缓存的组件里面设置的name值
image.png
<keep-alive include="buyClassReturnMoney">
<router-view></router-view>
</keep-alive>
语法介绍完了，下面是项目中用法
项目中用法
需要缓存的组件name都添加到 getKeepList书里面，不需要缓存的时候在数组里把name去掉，
getKeepList在vuex的state初始化的
App.vue文件
<keep-alive :include="getKeepList.join(',')">
<router-view></router-view>
</keep-alive>
store.js 文件
把getKeepList数组放到 vuex的state里面
const store = new Vuex.Store({
state: {
keepList: ['agentOrderList'] // 默认缓存了一个组件
},
mutations:{
// 向keepList添加缓存组件
modifyKeepList(state, val) {
state.keepList.push(val);
},
// 删除缓存组件
deteleKeepList(state, val) {
let index = state.keepList.indexOf(val);
if(index > -1) {
state.keepList.splice(index, 1)
}
}
},
})
buyClassReturnMoney.vue 文件
这个文件是被动态缓存的组件，在此页面点击下一步的时候，需要缓存此组件
根据自己的需求来缓存，我是下一步时缓存的，因为我要填写一些表单，也可以一开始进来此组件就缓存，判断keepList数组里面有没有该name（buyClassReturnMoney），没有的话就添加，这就实现了动态缓存了，不需要缓存的时候从数组中删掉就可以了，删除缓存我是在退出的时候删除的
methods: {
subNext() {
let list = this.$store.state.keepList;
let index = list.indexOf('buyClassReturnMoney');
if(index == -1) {
this.$store.commit('modifyKeepList', 'buyClassReturnMoney')
}
}
}
head.vue
在head组件里面点击退出登录时，删除缓存,这样就搞定啦，美滋滋
methods: {
//退出登录
loginOut() {
var obj = {
token: localStorage.getItem('token')
};
loginOut(obj).then((res) => {
if (res.data.status == 1) {
// 删除页面缓存
this.$store.commit('deteleKeepList', 'buyClassReturnMoney');
this.$router.push({
path: '/login'
});
}
});
}
}
