Vue动态缓存KeepAlive

vue中keep-alive组件主要有三个常用的props。

  • 1,include存放的name是组件自身的name属性,只有名称匹配的组件会被缓存
  • 2,exclude,任何名称匹配的组件都不会被缓存
  • 3,max,最多可以缓存多少组件实例,一旦达到这个数字,那么缓存组件中最近没有被缓存的实例会被销毁

这里使用 include 属性实现动态缓存,include 有3种传值方式:

  1. '组件A的name,组件B的name'
  2. '正则表达式1,正则表达式2'
  3. '[组件A的name,组件B的name]'

实际开发过程中一般配合vue-router食用:

<keep-alive :include="aliveRoutes">

<router-view></router-view>

</keep-alive>

思路:通过将 aliveRoutes 加入Vuex进行状态管理,然后通过actions来动态改变aliveRoutes。具体实现如下:

javascript 复制代码
// store/async-router.js
state: {
 ...
 aliveRoutes: []    
},
mutations: {
    UPDATE_ALIVE_ROUER: (state, data) => {
      state.aliveRoutes = data
    },
},
actions: {
    ...
    addAliveRouter({ commit, state }, routerName) {
      if (!routerName) return
      const originData = state.aliveRoutes || []
      originData.push(routerName)
      const arr = Array.from(new Set(originData))
      commit('UPDATE_ALIVE_ROUER', arr)
    },
    delAliveRouter({ commit, state }, routerName) {
      const originData = state.aliveRoutes || []
      const index = originData.indexOf(routerName)
      if (!routerName || index === -1) return
      originData.splice(index, 1)
      commit('UPDATE_ALIVE_ROUER', originData)
    },
}
javascript 复制代码
// xxx.vue

...

export default {
name: 'componentA', // 注意name需要与 aliveRoutes 中保持一致
 beforeRouteLeave(to, from, next) {
    next()
    // 判断如果返回首页则移除keepalive 否则保持缓存
    if (to.path === 'index') {
    // 移除 aliveRoutes 中的 componentA 
      this.$store.dispatch('delAliveRouter', 'componentA')
    }
  },
created() {
// 初始化时增加 componentA 到 aliveRoutes 
    this.$store.dispatch('addAliveRouter', 'componentA')
},
...
}

在初始化路由时可以将路由中需要缓存的组件的name添加到 aliveRoutes 中

javascript 复制代码
import store from '@/store'

// 加载默认需要keep alive的路由
allRoutes.forEach(route => {
  const { meta, name } = route
  if (meta && meta.keepAlive) store.dispatch('addAliveRouter', name)
})

...
相关推荐
abigale0314 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
en-route31 分钟前
HTTP 缓存
网络协议·http·缓存
专注API从业者33 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile37 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399739 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码