vue手动清除keep-alive中的缓存

当我们在项目中使用tagView切换拦的时候，意味着我们需要缓存出现的页面

利用keep-alive的include，新打开标签时，把当前组件名加入到include数组里，关闭标签时从数组中删除关闭标签的组件名就可以了

首先，keep-alive组件的include是可以绑定匹配名字的组件，匹配的组件将会被缓存，所以我们可以动态的在vuex里面绑定一个缓存。

打开的vue调试工具窗口查看vuex里面的值，这里我使用cachedViews去存储vue需要缓存的组件，这个值是组件的name值而不是路由name的值，所以后面会引出一个问题。

所以点击删除的时候把对应的名字从include里面删除，vue的keep-alive组件内部自动会把对应的组件缓存删掉。

  DEL_CACHED_VIEW: (state, view) => {
   
    const index = state.cachedViews.indexOf(view.name);
    index > -1 && state.cachedViews.splice(index, 1);
  },
  
  // 直接从cachedViews删掉就是，included绑定就是cachedViews，删掉后keep-alive就会自动删除缓存

但是如果有另外一种情况：不同的页面使用的是同一个组件，如果还是按照上面的逻辑去删除，就会导致删除一个页面的时候把所有使用该组件的页面的缓存给删除。

这样肯定不是我们想要的。所以我们需要删除点击的那个组件实例去删除，很遗憾官网没有提供直接删除某一个组件实例的方法。

所以只有从keep-alive存储缓存的源码出手，把组件的实例删除掉。