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

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

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

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

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

image.png

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

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

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

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


     


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

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

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

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

API — Vue.js

好了,下面直接说我的解决办法吧。我将includevuex搭配进行了使用,使用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   所在的页面


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

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

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

image.png

你可能感兴趣的:(通过keepalive对后台管理列表进行缓存)