vue动态改变keepAlive缓存

vue有一个组件keepAlive来实现页面数据缓存，在跳转页面时保存页面数据，在实际的项目中需要动态改变，实现动态保存页面数据。

在组件切换时，A→B  B不缓存，B→C   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;
              }
           }
        }
    }
 

   在store文件夹下新建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.catchArr.indexOf(component);
            index > -1 && state.catchArr.splice(index, 1);
        },
    }
}) 

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();
    },
}
 

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({
    routes
});

// 全局导航守卫
router.beforeEach((to, from, next) => {
    // 对组件B进行动态缓存
    if (to.name === 'B') {
        store.commit('isKeepAlive', to.name);
        next();
    }
})

export default router;

注意：to.name中的name不是路由中的name，而是每个vue类的name

export default {

  name: "B"

}