keep-alive 相关内容

概念: <keep-alive> 是Vue的一个内部组件,适合用来缓存不需要实时更新的组件,这样可以保留组件状态避免重新渲染。

Props:

  • include :接受字符串或正则表达式,这里是需要被缓存的组件名
  • exclude :接受字符串或正则表达式,这里是不需要缓存的组件名
  • max :接受数字,最多可以缓存多少组件实例
问题: 在需要重新请求数据的时候,依然走的缓存

案例中的部分源码:
在这里插入图片描述

问题描述:
这个项目是一个后台管理系统,由于很多组件都有走缓存的原因,导致在更换账户之后,数据依然走的缓存,并没有加载新的数据,从而账户虽然已经更换,但是现实的内容还是上一个账户下的内容,这时候在network也会发现,除了之前请求的数据,就没有新数据请求的记录了

解决方案:

方案1: 如果要在进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来created钩子中获取数据的任务(亲测,时而有效,时而无效,不知道是什么原因)。

方案2: 在账户登录之后调用 **window.location.reload() **,起到重新请求的作用(已亲测)

方案3: 在vuex中设置状态,动态绑定 include 值,在登录的时候缓存需要缓存的组件,在退出的时候,清除需要刷新的组件(效果很理想,也顺带解决了加载数据时,数据闪现的情况)

//--------------------- VUEX ----------------------------
const state = {
  keepAliveList: 'login,index,productionList,characterList,dynamicList,QAList,fansList'// 需要缓存的页面
}
const mutations = {
  KeepAliveListState (state) {
    state.keepAliveList = 'login,index,productionList,characterList,dynamicList,QAList,fansList'
  },
  removeAliveList (state) {
    state.keepAliveList = 'index'
  }
}
const getters = {
  keepAliveListState (state) {
    return state.keepAliveList
  }
}
export default new Vuex.Store({
  state,
  mutations,
  getters
})

//--------------------- 在app中统一监控----------------
computed: {
    keepAliveList () {
      if (this.$store.getters.keepAliveListState) {
        return this.$store.getters.keepAliveListState
      }
    }
  },
  //--------------------- 在退出的时候,提交removeAliveList ---------------
  this.$store.commit('removeAliveList')
  //--------------------- 在登录的时候,提交KeepAliveListState ---------------
  this.$store.commit('KeepAliveListState')

推荐博文:https://www.cnblogs.com/sysuhanyf/p/7454530.html

Logo

前往低代码交流专区

更多推荐