找回密码
 加入我们
关闭

CSDN热搜

草根吧
首页 官方推荐社区 移动开发 keepalive路由缓存实现前进革新退却缓存

adb keepalive路由缓存实现进步革新退却缓存

IP:广东省广州市
blingbling兵兵 2023-12-3 11:13:14
1.在app.vue中设备全局的keepalive并用includes指定要缓存的组件路由name名字数组
  1. <keep-alive :include="keepCachedViews">
  2.       <router-view />
  3.     </keep-alive>
  4. computed: {
  5.     keepCachedViews() {
  6.       console.log('this.$store.getters.keepCachedViews', this.$store.getters.keepCachedViews)
  7.       return this.$store.getters.keepCachedViews
  8.     }
  9.   },
复制代码
2.在vuex中/store/module存储要缓存的组件路由数组
  1. state: {
  2.     keepCachedViews: []
  3.   },
  4. mutations: {
  5. //增加方式
  6.     UPDATE_KEEPCACHEDVIEWS: (state, view) => {
  7.       console.log('增加缓存------', view)
  8.       if (state.keepCachedViews.includes(view.name)) return
  9.       if (!view.meta.noCache) {
  10.         state.keepCachedViews.push(view.name)
  11.       }
  12.     },
  13. //删除方式
  14.     DELET_KEEPCACHEDVIEWS: (state, view) => {
  15.       console.log('删除缓存------', view)
  16.       const index = state.keepCachedViews.indexOf(view.name)
  17.       index > -1 && state.keepCachedViews.splice(index, 1)
  18.     },
  19. },
  20. actions: {
  21.     updateKeepcachedViews({ commit }, views) {
  22.       commit('UPDATE_KEEPCACHEDVIEWS', views)
  23.     },
  24.     deleteKeepcachedViews({ commit }, views) {
  25.       commit('DELET_KEEPCACHEDVIEWS', views)
  26.     },
  27. }
复制代码
3.在vuex getter.js中获得keepCachedViews
  1. export default {
  2.   keepCachedViews: state => state.ibps.app.keepCachedViews// 缓存的组件
  3. }
复制代码
4.在组件内保卫中判定什么时候缓存该组件
留意:路由分开时再增加缓存不生效 ,所以我想到的打点法子是在进入要缓存的页眼前,先默许将页面增加到缓存数组中,在分开时再判定能否要缓存这个组件
ps:路由前置保卫中没有this,所以要用vm
  1.   beforeRouteEnter(to, from, next) {
  2.     next(vm => {
  3.       vm.$store.dispatch('ibps/app/updateKeepcachedViews', to)
  4.       return true
  5.     })
  6.   },
  7.   beforeRouteLeave(to, from, next) {
  8.     if (to.name != 'ylnlDataTemplateList') {
  9.       this.$store.dispatch('ibps/app/deleteKeepcachedViews', from)
  10.     }
  11.     next()
  12.   },
复制代码
留意:路由中的name和组件的name要分歧



免责声明:本文章来自网友分享,假如加害了您的权益,请联系我们,我们会实时删除侵权内容,感谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?加入我们

x

使用道具 举报

您需要登录后才可以回帖 登录 | 加入我们