vue keep-aclive 按需缓存 动态缓存

遇到的问题

先说在使用 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'
            });
          }
        });
      }
}