Vue动态改变keepAlive缓存

功能需求：

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

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

1. 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;
   		      }
   		   }
   		}
   	}
   

2. vuex的store.js文件 (维护设置缓存和取消缓存的方法，并共享缓存数组状态)

   import Vue from 'vue';
   import Vuex from 'vuex';
   
   Vue.use(Vuex);
   
   export default new Vuex.Store({
   	state: {
   		catchArr: [ 'D' ] //保存缓存的列表(D是固定要缓存的组件）
   	},
   	mutations: {
   		// 对指定组件进行动态更改缓存（缓存）--组件调用该方法时，判断该组件是否存在于该缓存数组，无则添加
   		iskeepAlive(state, component) {
   			!state.catchArr.includes(component) && state.catchArr.push(component);
   		},
   		// 对指定组件进行动态更改缓存（不缓存）--组件调用该方法时，从缓存数组中删除对应的组件元素
   		noKeepAlive(state, component) {
   			let index = state.catchList.indexOf(component);
   			index > -1 && state.catchList.splice(index, 1);
   		},
   	}
   })
   

3. B.vue文件 (由于只有组件C>组件B才需要缓存，所以如果to的组件不是C时，则给B设置不缓存【那么从别的组件回来时，B则是不缓存状态】)

   <template>
   	<div>需要动态改变是否缓存的组件</div>
   </template>
   

   export default {
   	beforeRouteLeave(to, from, next) {
   	    if (to.name !== "C") {
   	      this.$store.commit("noKeepAlive", "B");
   	    }
   	    next();
   	},
   }
   

4. router.js文件 (主要是全局导航守卫，如果to的是组件B, 则设置为缓存【便于跳转到C再回来时，是缓存状态】)

   import Vue from 'vue';
   import Router from 'vue-router';
   Vue.use(Router);
   import store from '@/store';
   const routes = [
   	{
   		path: 'A', 
   		name: 'A', 
   		component: () => import(/* webpackChunkName: "A" */ '../views/A.vue')
   	},
   	{
   		path: 'B', 
   		name: 'B', 
   		component: () => import(/* webpackChunkName: "B" */ '../views/B.vue')
   	},
   	{
   		path: 'C', 
   		name: 'C', 
   		component: () => import(/* webpackChunkName: "C" */ '../views/C.vue')
   	}
   ]
   let router = new Router({
   	mode: 'hash',
   	base: process.env.BASE_URL,
   	routes
   });
   
   // 全局导航守卫
   router.beforeEach((to, from, next) => {
   	// 对组件B进行动态缓存
   	if (to.name === 'B') {
   		store.commit('iskeepAlive', to.name);
   		next();
   	}
   })
   
   export default router;
   

   基本做法就是这样，ok，午休时间结束了。