使用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不会再执行。

总结

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

相关文章

  • vue和iview实现Scroll 数据无限滚动功能

    vue和iview实现Scroll 数据无限滚动功能

    今天小编就为大家分享一篇vue和iview实现Scroll 数据无限滚动功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue中v-if与v-show的使用区别及应用场景解读

    Vue中v-if与v-show的使用区别及应用场景解读

    本文详细介绍了Vue开发中v-if和v-show的使用方法和性能区别,帮助开发者根据场景选择合适的条件渲染指令,v-if通过添加/移除DOM元素实现条件渲染,适用于不常切换的场景;v-show通过CSS控制显示/隐藏,适用于频繁切换的场景
    2026-01-01
  • 浅谈Vue3 Composition API如何替换Vue Mixins

    浅谈Vue3 Composition API如何替换Vue Mixins

    这篇文章主要介绍了浅谈Vue3 Composition API如何替换Vue Mixins,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue.js全局API之nextTick全面解析

    vue.js全局API之nextTick全面解析

    本篇文章主要介绍了vue.js全局API之nextTick全面解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue中的H5移动端项目 真机测试配置方式

    vue中的H5移动端项目 真机测试配置方式

    这篇文章主要介绍了vue中的H5移动端项目 真机测试配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue 组件高级用法实例详解

    vue 组件高级用法实例详解

    这篇文章主要介绍了vue 组件高级用法,需要的朋友可以参考下
    2018-04-04
  • Echarts实现一张图现切换不同的X轴(实例代码)

    Echarts实现一张图现切换不同的X轴(实例代码)

    这篇文章主要介绍了Echarts 如何实现一张图现切换不同的X轴,通过动图给大家展示效果,实例代码相结合给大家介绍的非常详细,需要的朋友可以参考下
    2021-11-11
  • vue3.0如何修改浏览器标题(静态)

    vue3.0如何修改浏览器标题(静态)

    这篇文章主要介绍了vue3.0如何修改浏览器标题(静态),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 如何在 vue3 中使用高德地图

    如何在 vue3 中使用高德地图

    这篇文章主要介绍了如何在 vue3 中使用高德地图,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • Vue中使用md5进行数据加密的实现方法

    Vue中使用md5进行数据加密的实现方法

    在现代Web开发中,数据安全是一个不可忽视的重要环节,Vue.js作为一个流行的前端框架,不仅提供了强大的数据绑定和组件化功能,还支持与各种后端服务的集成,本文将探讨如何在Vue应用中使用MD5算法来加密数据,从而提升应用的安全性,需要的朋友可以参考下
    2024-10-10

最新评论