通过keepalive对后台管理列表进行缓存

问题： 我目前正在负责一个后台管理项目，管理系统最多的无外乎就是这张表，那张表。而这个问题就是出现在表上，基本上表上的每个数据都要有一个详情，而且由于表的中的数据量一般都很大，都会用到分页或者查询搜索。

需求： 也就是咱们要解决的问题，这个问题就出现在表页面与详情页面或者编辑页面跳转时，不能很好的缓存列表页在跳转至其他页面再进行返回时的场景。简而言之就是缓存列表组件并只在对应模块下进行缓存。

好的扯了这么多，那么我是如何解决的呢?

因为在Vue中，每个页面都可以被认为是一个组件，这个时候，可以考虑将该页面进行缓存，然后我在Vue官网找到了keep-alive,其具体内容如下：

image.png

以上可以知道，通过keep-alive是可以缓存不活动的组件实例的，并且在keep-alive中是会有activated和deactivated两个生命周期钩子函数。

最初时，我是在 router中添加meta元信息,在其中添加一个keepAlive属性，并将要缓存的页面设置为true

// 需要被缓存的页面路由
{
    path: '/keepAlive',
    name: 'keepAlive',
    component: keepAlive,
    meta:{
        keepAlive: true
    }
}

然后在视图组件router-view上添加keepAlive

<keep-alive>
     <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

最后通过activated和deactivated函数在被缓存的页面调用相关的方法。

上述方法能将符合条件的路由进行缓存，但是上述方法有一个弊端，回到一开始的需求，是要在对应模块下缓存列表组件，而上述方法是将所有符合条件的路由进行了缓存，但是并没有做到仅仅只是在对应模块下缓存。

网上说直接将keepAlive设置为false就能销毁缓存，从我实验的结果来看，貌似并没有什么卵用，改天用Vue-devtools看看到底有没有被销毁。

在观看官方文档时，keep-alive自带三个props,分别是include、exclude、max，具体使用方法我就不多做赘述了直接上文档吧。

API — Vue.js

好了，下面直接说我的解决办法吧。我将include和vuex搭配进行了使用，使用include 判断需要缓存的路由，通过vuex 全局缓存数据，因为这个需求是对整个系统的列表而言，因此我还是用了 [mixin](混入 — Vue.js)(混入)

// store
state: {
    // 用来存放需要需要缓存的组件
    keepAliveArray: []
}，
mutatios: {
    // 清空缓存组件
    clearKeepAliveArr(state, data){
        state.keepAliveArray = data
    },
    // 添加需要缓存的数据
    pushKeepAliveArr(state, data){
        state.keepAliveArr.push(data)
    },
}

// main.js
// 全局混入一个导航守卫，在离开当前页面时使用
Vue.mixin({
    beforeRouteLeave(to, from, next){
      // 如果是跳转的是列表列表要清空之前的数据
      if(to.meta.isList ){
          this.$store.commit('clearKeepAliveArr',[]);
          this.$store.commit('pushKeepAliveArr',to.name);
      }
    }
})

// router
// 需要注意的是：因为include是靠组件名进行判断是否缓存
// 因此必修将 name 和 组件名保持一致。
{
    path: 'list1',
    name: 'list1',
    component: list1,
    meta: {
        pageName: '列表1'，
        isList: true
    }
},
{
    path: 'details1',
    name: 'details1',
    component: details1,
    meta: {
        pageName: '详情1'，
    }
},
{
    path: 'list2',
    name: 'list2',
    component: list2,
    meta: {
        pageName: '列表2'，
        isList: true
    }
},

// router-view   所在的页面
<template>
        <keep-alive :include="keepAliveArr">
            <router-view></router-view>
        </keep-alive>
</template>
<script>
export default {
    computed: {
        keepAliveArr(){
            return this.$store.state.keepAliveArr
        }
    },
};
</script>

通过以上所述方法就能够成功的将同一模块下面的列表进行缓存了，因为是使用的是路由守卫进行的数据的添加和删除，因此，如果想要在页面刷新后任要能够进行缓存，可以再vuex上添加sessionstorage缓存数据，这里我就不做说明了，相信这难不到聪明的你，并且如果路由存在子级话，想要缓存路由还是需要在router-view上加上keep-alive。

如果上述有什么不对的地方，或者各位大佬们有什么更好的方法，可以在下方留言评论告知哦！

纯手打，请各位大佬给我点个赞!

image.png