Vue动态改变keepAlive缓存

最新推荐文章于 2024-06-01 23:46:08 发布

前端的小刘老师

最新推荐文章于 2024-06-01 23:46:08 发布

阅读量6.6k

点赞数 3

分类专栏：笔记 Vue 文章标签： vue.js es6

本文链接：https://blog.csdn.net/weixin_44489221/article/details/103917015

版权

本文介绍了在Vue项目中动态改变组件缓存的需求。通过keep-alive组件，结合Vuex状态管理，实现了根据路由变化动态决定组件B是否被缓存。在App.vue中监听缓存数组，Vuex中提供缓存控制方法，B.vue根据to组件判断是否缓存，同时利用全局导航守卫确保从C到B时保持缓存状态。

摘要由CSDN通过智能技术生成

功能需求：

大家都知道keep-alive组件的作用，在实际开发过程中，经常会遇到对部分组件进行缓存，常用操作方法见另一篇博客
对指定组件进行keep-alive缓存
然而，组件切换时还存在另一种需求：A>B不缓存，C>B缓存；也就是组件B是需要动态改变是否进行缓存的。

作为一个懒癌 + 菜鸡，我只想使用最简单易懂的方式实现(以下为关键代码)

App.vue文件 (监听缓存数组的变化)

	<keep-alive :include="cached">
      <router-view />
    </keep-alive>

	export default {
     
		data() {
     
    		return {
     
      			cached: this.$store.state.catchArr
		    };
		},
		watch: {
     
		    $route: {
     
		      //监听路由变化
		      handler: function(to, from) {
     
		        this.cached = this.$store.state.catchArr;
		      }
		   }
		}