如何用Vuex和Keep-alive实现动态长尾词标签页的缓存功能？

本文共计1538个文字，预计阅读时间需要7分钟。

在开发众多管理系统过程中，常需对打开的路线页面进行缓存，以便于在系统页面提供方便的查阅、切换标签页以及对已缓存页面进行数据刷新和清除操作。

在开发很多管理系统过程之中，常遇到这种需求，需要对打开路由页面进行缓存，然后在系统页眉提供方便查阅的tab标签进行切换以及对已经缓存页面进行数据刷新和清除数据操作。具体演示如下图所示：

在上面演示中实现了类似 window tab 标签页效果，会对当前数据进行缓存。在浏览器中实现对路由页面的缓存可以减少接口请求，也方便了用户来回切换想搜索的数据列表。

原理

Vue 提供的 keep-alive API实现对路由组件的缓存。 include 属性可以绑定一个数组，里面是需要路由组件的 name 值，可以实现对该路由组件进行缓存，如果不需要对路由进行缓存，直接移除该项元素即可。

代码组织和设计

实现上面的功能，采用 vuex 进行全局的缓存数据保存，定义为 cacheView ;已经打开的路由页面用 toolBarData 进行保存。下图是代码是代码设计整体图:

需要添加一个路由页面到 cacheView ，需要有 actions setCacheView 来 commit 一个 change Event 对 state 数据进行更改，然后修改后的数据会自动派发到 App.vue 中使用到该数据的位置（即 keep-alive
处）。而添加标签页也是类似的流程，不再描述。