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里的<keep-alive>属性将需要缓存的组件给包裹起来，可以写在项目文件下的App.vue里也可以在布局文件夹下的layout.vue里，看个人需求，这里是写在layout.vue内的，如下：

   // include包含需要缓存的组件的name
   <keep-alive :include="keepAlive">
        <router-view></router-view&g