vue项目的动态缓存

前言

在项目开发中，经常会遇到页面需要缓存的情况，大家往往第一思路肯定想的是keepalive。本文实现了一套动态keepalive方案，希望对大家有帮助~

介绍

• keep-alive顾名思义，保持活跃。
• vue就是组件化编程，一个.vue文件就是一个组件。每个东西都有从出生到消亡的生命周期过程，vue的组件也是一样，也有自己的生命周期，比如create创建组件、mounted往组件上挂数据、update更新组件上挂的数据，destroy把组件实例销毁。
• 所以使用keep-alive就是保持组件活跃，不会被destroy销毁掉，就一直还活着，组件没有被销毁掉的话，组件上挂载的数据就还存在，所以状态就可以保留，所以，keep-alive就可以保持组件的状态。

开始

App.vue

首先在App.vue中添加keepalive，绑定动态cached参数。

<template>
  <div id="app">
    <!-- keepAlive动态缓存 -->
    <keep-alive :include="cached" max="5">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    cached() {
      return this.$store.getters['base/getCatchArr']
    }
  }
}
</script>

store存储配置

在store中配置存储keepalive的添加以及移除等操作

export default {
  namespaced: true,
  state: {
    // keepAlive保存缓存的列表
    catchArr: []
  },
  getters: {
    // 获取缓存列表
    getCatchArr(state) {
      return state.catchArr.toString()
    }
  },
  mutations: {
    // 对指定组件进行动态更改缓存（缓存）--组件调用该方法时，判断该组件是否存在于该缓存数组，无则添加
    iskeepAlive(state, component) {
      !state.catchArr.includes(component) && state.catchArr.push(component)
    },
    // 对指定组件进行动态更改缓存（不缓存）--组件调用该方法时，从缓存数组中删除对应的组件元素
    noKeepAlive(state, component) {
      const index = state.catchArr.indexOf(component)
      index > -1 && state.catchArr.splice(index, 1)
    }
  },
}

路由监听

在路由监听中进行keepalive的动态处理

  router.beforeEach((to, from, next) => {
    // 对组件进行动态缓存
    if (to.meta.keepAlive === true) {
      store.commit('base/iskeepAlive', to.name)
    } else if (from.meta.keepAlive === true && to.meta.clearAlive == true) {
      store.commit('base/noKeepAlive', from.name)
    }
    next()
  })

路由参数配置

相信大家通过上面的文章已经可以看到页面的动态缓存是通过路由的参数来识别的，这里进行介绍：
name: 页面name，需和页面内编写保持一致

keepAlive: 浅显易懂，对配置的页面进行缓存

clearAlive: 用来解除页面缓存，保证下次进入可以重新执行mounted。

举例：

• 从列表页面选中某一项进入详情，返回列表页时需要保留列表的选中状态，此时需要进行缓存
• 从列表页面再返回上一级页面，比如首页。然后再次进入列表页面时需要解除缓存，保证最新数据能够重新渲染。

{
    path: '/home',
    name: 'Home',
    component: () => import('@business/views/home'),
    meta: {
      title: '首页',
      keepAlive: false, // 对特定页面进行缓存缓存
      clearAlive: true  // 对下级页面解除缓存
    }
  }

总结

相信你看完上面的文章，能够成功利用keepalive的动态封装有效解决的页面缓存问题。 本文到此结束，希望对你有帮助 😉