vue中keepAlive实现缓存

刚踏入前端这个门口的时候，大佬给我一个需求。把后台管理系统的tabs标签页上所有打开的页面中搜索内容缓存，但是页面内容不缓存。同时，当关闭了tabs标签页中的页面时，该页面的不再缓存。当从左边菜单打开，在tabs显示时再次缓存。

当时，对vue认识更加浅显，直接就是给每个页面都起一个名字（该名字与组件名字相同）储存在本地，然后根据watch监听，当输入框有输入的时候就把记录存在本地。监听路由，当关闭该标签的时候再清空路由。每当页面加载的时候在mouted中就创建该页面的本地存储。代码实在太多了，看着惨不忍睹，如果一个页面是个搜索框，一个个watch,想si的心都有了，但是没办法，当时想不到更好的办法，只想把东西做出来交差。

现在，不，是今天，终于受不了自己写的东西了。几式个页面。改，删，删。终于看起来舒服了好多。

实现方式：

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

keepAliveList为tabs中需要缓存的组件的数组。统一用组件名称。储存在vuex中。当tabs增删的时候动态commit到vuex中。此时已经实现了tabs中的页面都缓存，关掉不缓存的情况了。

但是呢因为大佬说想要缓存页面中的所有搜索框历史，table中的数据不缓存。

所以在每个页面中使用activated和deactivated组件实现。由于在第一次进入页面，会先执行mounted,再执行activated。设置一个变量isInite=false。让mounted中执行isInite=false；deactivated（离开页面执行）执行isInite=true;activated中判断如果isInite=true，说明不是第一次进来（主要是防止第一次打开页面请求两次数据）就执行发送请求。

最后实现了，页面只是缓存搜索框，页面中table的数据还是会加载。

好了，喜欢的小哥哥小姐姐点个赞，我才有动力记录每一次成长嘛，目前还没获取到过一个赞呢。