使用keep-alive时,数据无法刷新的问题及解决

 更新时间:2023年07月04日 10:13:17   作者:碎碎。  
这篇文章主要介绍了使用keep-alive时,数据无法刷新的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

使用keep-alive时,数据无法刷新问题

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')

keep-alive数据刷新问题

有时候实时数据需要刷新但由于缓存会显示之前的数据 用户点击之后会报错:

处理方式如下

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

(2)放在actived中获取数据

(3)

tips:

beforeRouteEnter --> created --> mounted --> activated --> deactivated

再次进入缓存的页面,只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vscode配置@路径提示方式,并解决vue文件内失效的问题

    vscode配置@路径提示方式,并解决vue文件内失效的问题

    这篇文章主要介绍了vscode配置@路径提示方式,并解决vue文件内失效的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue3实现动态路由及菜单

    vue3实现动态路由及菜单

    这篇文章主要介绍了vue3实现动态路由及菜单,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue-cli设置publicPath小记

    vue-cli设置publicPath小记

    这篇文章主要介绍了vue-cli设置publicPath小记,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vuecli4插件svg-sprite-loader使用svg图标

    vuecli4插件svg-sprite-loader使用svg图标

    这篇文章主要为大家介绍了vuecli4插件svg-sprite-loader使用svg图标示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue.js+Echarts开发图表放大缩小功能实例

    vue.js+Echarts开发图表放大缩小功能实例

    本篇文章主要介绍了vue.js+Echarts开发图表放大缩小功能实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Vue 路由间跳转和新开窗口的方式(query、params)

    Vue 路由间跳转和新开窗口的方式(query、params)

    这篇文章主要介绍了Vue 路由间跳转和新开窗口的方式,本文主要通过query方式和params方式介绍,需要的朋友可以参考下
    2019-12-12
  • vue计算属性+vue中class与style绑定(推荐)

    vue计算属性+vue中class与style绑定(推荐)

    这篇文章主要介绍了vue计算属性+vue中class与style绑定,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • vue如何将字符串变为数组

    vue如何将字符串变为数组

    这篇文章主要介绍了vue如何将字符串变为数组问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)

    Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)

    这篇文章主要介绍了Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue vant Area组件使用详解

    vue vant Area组件使用详解

    这篇文章主要介绍了vue vant Area组件使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12

最新评论