2019-07-08 Vue-vuex+keepAlive动态缓存

问题描述

现有三个页面，A（列表页面）、B（创建页面）、C（详情页面）
需求：A页面进入B，B返回A页面刷新列表，A页面不缓存；A页面进入C页面，C返回A页面不刷新列表，需要缓存A页面
解决方法：网上方法层出不穷，不过大部分治标不治本，又会有新的bug出现，比如A第一次进入C页面，返回A页面刷新列表，没有缓存，第二次才有了缓存；而A进入B页面，创建了列表数据后，再返回A页面，再次进入C页面，返回A页面还是之前的一次缓存，需要手动刷新才能更新缓存。目前使用vuex+keepAlive动态缓存能一次性解决根本问题，并且没有bug。

第一步 设置keepAlive包裹需要缓存的组件

1. 使用vue里的属性将需要缓存的组件给包裹起来，可以写在项目文件下的App.vue里也可以在布局文件夹下的layout.vue里，看个人需求，这里是写在layout.vue内的，如下：

   // include包含需要缓存的组件的name
   <keep-alive :include="keepAlive">
        <router-view></router-view>
   </keep-alive>
   // keepAlive写在计算属性里
   computed: {
       keepAlive() {
         return this.$store.getters.keepAlive;
       }
   }
   

2. 在项目文件里的store文件下的index.js里初始化上面定义的keepAlive属性

   export default new Vuex.Store({
     // 属性初始化
     state: {
       // 动态缓存需要的组件
       keepAlive: [] // 这里添加的是vue文件的name
     },
     // 获取属性状态
     getters: {
       keepAlive: state => state.keepAlive
     },
     // 更改属性状态  同步
     mutations: {
       setKeepAlive: (state, keepAlive) => {
         state.keepAlive = keepAlive;
       }
     },
     // 应用更改的属性状态 异步
     actions: {
     }
   })
   

第二步 在列表页面里使用beforeRouteLeave函数控制需要是否需要缓存的条件

1. 在此项目中，选择的是一个带有表格的列表页，有详情页跳转

   // 选择进入详情页页面需要缓存
     beforeRouteLeave(to, from, next) {
       if (to.path === '/result-poms-detail') { // 这是路由path
         this.$store.commit('setKeepAlive', ['result-poms']); //这是此页面的name属性名字
       } else {
         this.$store.commit('setKeepAlive', []);
       }
       next();
     }
   

至此，动态缓存的问题已经解决了，这是自己项目的实际经验，也是查了很多的资料，看了很多别人的代码，才总结出来的，希望能帮助到大家！