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 相关文章推荐
15条JavaScript最佳实践小结
Aug 09 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
PHP SEO优化之URL优化方法
2011/04/21 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
python快速排序代码实例
2013/11/21 Python
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
国际经济贸易专业推荐信
2013/11/06 职场文书
支教自我鉴定
2014/01/18 职场文书
教导处工作制度
2014/01/18 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
大型演出策划方案
2014/05/28 职场文书
欢度春节标语
2014/07/01 职场文书
课程设计的心得体会
2014/09/03 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
mysql序号rownum行号实现方式
2022/12/24 MySQL