Vue项目全局配置页面缓存之按需读取缓存的实现详解


Posted in Javascript onAugust 01, 2018

写在前面

一个web app的实际使用场景中,有一些情景的交互要求,是记录用户的浏览状态的。最常见的就是在列表页进入详情页之后,再返回到列表页,用户希望返回到进入详情页之前的状态继续操作。但是有些使用场景,用户又是希望能够获取最新的数据,例如同级列表页之间切换的时候。

如此,针对上述两种使用场景,需要实现按需读取页面缓存。由于SPA应用的路由逻辑也是在前端实现的,因此可以在前端对路由的逻辑进行设置以实现所需效果。

使用技术

  • Vue.js作为主要框架
  • Vue-router作为前端路由管理器
  • Vuex作为状态管理工具

总体思路

keep-alive判断当前组件是否读取缓存的节点,在整个生命周期里面非常靠后,在afterEach之后,基本在组件实例创建之前。(因此在此之前对当前组件是否读取缓存进行处理都是可行的,我选择在全局前置守卫进行处理)

而判断当前组件是否缓存的节点,则早于组件的beforeRouteLeave钩子。

基于上述逻辑,本方案解决的逻辑是,对当前打开的页面进行判断,动态生成需要keepAlive的组件数组配置,对有可能需要缓存的先行进行缓存,然后在每次路由切换的时候,再进行判断,按需读取页面缓存。

  1. 使用kepp-alive进行缓存,使用include属性对需要缓存的页面进行配置。
  2. 由于需要缓存的页面配置系动态生成,所以使用vuex储存该配置。
  3. 在路由元信息中写入两个配置,一是该路由是否需要缓存,二是从相关路由进入时才进行缓存的特定路由数组。
  4. 在beforeEach进行设置,每次进入路由之前,对进入的路由及其所有父级路由进行判断,若需要缓存且命中特定路由数组,则将相关路由添加至缓存配置文件中;若不符合,则将相关路由删除。(此步骤实现了路由切换时,需要则读取缓存,不需要则重新获取数据。)
  5. 使用全局mixin,进入相关组件之前,对当前路由进行判断,如果需要缓存的则将该路由添加至缓存配置中。(此步骤实现了缓存当前打开的需要缓存的页面。)

具体实现

1. 使用include属性控制路由缓存

此处需要注意的是,include匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

但是vue-router的环境下,是没有局部注册名称的,只能为组件补全name属性。

因此,请务必给组件添加 name 选项,否则匿名组件将全部应用缓存。

<keep-alive :include="$store.state.cachedRouteNames">
 <router-view />
</keep-alive>

2. 添加全局路由缓存配置

// store/index.js

const store = new vuex.Store({
 state: {
 // 缓存的路由列表
 cachedRouteNames: [],
 },
 mutations: {
 UPDATE_CACHEDROUTENAMES(state,{ action, route }) {
  const methods = {
  'add': () => {
  state.cachedRouteNames.push(route)
  },
  'delete': () => {
  state.cachedRouteNames.splice(state.cachedRouteNames.findIndex((e) => { return e === route}),1)
  }
  }
  methods[action]()
 }
 }
})

3. 配置路由元信息,对需要缓存的路由进行配置

keepAlive表明路由需要被缓存,必须,否则不缓存

cacheWhenFromRoutes为数组,非必须,若为falsy值,则任何时候均缓存;若为空数组,则任何时候均不缓存

// router/index.js

{
 path: '/productslist',
 name: 'ProductsList',
 component: ProductsList,
 meta: {
 keepAlive: true,
 cacheWhenFromRoutes: ['ProductDetail'] // 此处配置的是路由的name
 }
},

4. 配置全局前置守卫,按需读取缓存

// routeControl.js

// 需要缓存的路由名称数组
const cachedRouteNames = store.state.cachedRouteNames;

// 定义添加缓存组件name函数,设置的是组件的name
const addRoutes = (route) => {
 const routeName = route.components.default.name
 if (routeName && cachedRouteNames.indexOf(routeName) === -1) {
 store.commit('UPDATE_CACHEDROUTENAMES', { action: 'add', route: routeName })
 }
}

// 定义删除缓存组件name函数,设置的是组件的name
const deleteRoutes = (route) => {
 const routeName = route.components.default.name
 if (routeName && cachedRouteNames.indexOf(routeName) !== -1) {
 store.commit('UPDATE_CACHEDROUTENAMES', { action: 'delete', route: routeName })
 }
}

router.beforeEach((to, from, next) => {
 
 // 处理缓存路由开始
 // 在读取缓存之前,先对该组件是否读取缓存进行处理
 to.matched.forEach((item, index) => {
 const routes = item.meta.cacheWhenFromRoutes;
 /**
  * 此处有几种情况
  * 1. 没有配置cacheWhenFromRoutes, 则一直缓存;
  * 2. 配置了cacheWhenFromRoutes,但是首次打开此web app,则from.name为空,此时应该将该页面组件的name添加到缓存配置文件中
  * 3. 配置了cacheWhenFromRoutes,from.name不为空,若命中cacheWhenFromRoutes,则添加该页面组件的name到缓存配置文件中,否则删除。
  *
  **/
 if (item.meta.keepAlive && (!routes || (routes && (!from.name || routes.indexOf(from.name) !== -1)))) {
  addRoutes(item)
 } else {
  deleteRoutes(item)
 }
 
 })
 // 处理缓存路由结束

 new Promise(( resolve, reject ) => {
 // ..other codes
 }).then( res => {
 if ( res ) {
  next(res)
 } else {
  next()
 }
 })
})

// 全局混入。此步骤的目的是在该组件被解析之后,若是属于需要缓存的组件,先将其添加到缓存配置中,进行缓存。

// 导航守卫的最后一个步骤就是调用 beforeRouteEnter 守卫中传给 next 的回调函数,此时整个组件已经被解析,DOM也已经更新。

Vue.mixin({
 beforeRouteEnter(to, from, next) {
 next(vm => {
  to.matched.forEach((item) => {
  const routeName = item.components.default.name
  if (to.meta.keepAlive && routeName && cachedRouteNames.indexOf(routeName) === -1) {
   store.commit('UPDATE_CACHEDROUTENAMES', { action: 'add', route: routeName })
  }
  })
 })
 },
})

写在最后

坑点

  • 此方案涉及两个name,一个是设置特定路由时,使用路由的name。另一个是动态生成缓存配置文件时,使用的是页面组件的name。
  • 务必给组件添加name属性,便于include属性的使用,也方便调试跟踪。如果组件缺少name属性,将会默认使用缓存。
  • 动态处理缓存配置时,一定要对to.matched进行遍历,否则嵌套路由的父级路由的缓存就无法生效,将导致子路由的缓存也无法生效。
  • 全局混入有一定危险性,慎用...

以上是实践过程中摸索出来的一种解决方案,我相信存在更加优雅高效的解决方式。如果你正好实践过相关方法,烦请指正,谢谢。

更多参考

github.com/vuejs/vue/i…

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
JavaScript执行环境及作用域链实例分析
Aug 01 #Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 #Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 #Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 #Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 #Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 #Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 #Javascript
You might like
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
vue生成token并保存到本地存储中
2018/07/17 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
使用python3实现操作串口详解
2019/01/01 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
自行车租赁公司创业计划书
2014/01/28 职场文书
总经理助理的职责
2014/03/14 职场文书
安全协议书范本
2014/04/21 职场文书
2014年残联工作总结
2014/11/21 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
sql注入报错之注入原理实例解析
2022/06/10 MySQL