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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
javascript计时器详解
Feb 28 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
php 数组的指针操作实现代码
2011/02/08 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
js一组验证函数
2008/12/20 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
js实现微信分享代码
2020/10/11 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
文史专业毕业生自荐信
2013/11/17 职场文书
实习协议书范本
2014/04/22 职场文书
铅球加油稿100字
2014/09/26 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
公司会议开幕词
2015/01/29 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
宪法宣传标语100条
2019/10/15 职场文书
用python实现监控视频人数统计
2021/05/21 Python
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python