vue项目中实现缓存的最佳方案详解

　　

　　

在开发vue的项目中有遇到了这样一个需求:一个视频列表页面,展示视频名称和是否收藏,点击进去某一项观看,可以收藏或者取消收藏,返回的时候需要记住列表页面的页码等状态,同时这条视频的收藏状态也需要更新,但是从其他页面进来视频列表页面的时候不缓存这个页面,也就是进入的时候是视频列表页面的第一页

　　

vue项目中实现缓存的最佳方案详解

　　

一句话总结一下:pageAList→pageADetail→pageAList,缓存pageAList,同时该视频的收藏状态如果发生变化需要更新,其他页面→pageAList, pageAList不缓存
　　

　　

在网上找了很多别人的方法,都不满足我们的需求

　　

然后我们团队几个人捣鼓了几天,还真的整出了一套方法,实现了这个需求

　　


　　

　　

无图无真相,用一张gif图来看一下实现后的效果吧! ! !

　　

操作流程:

　　

vue项目中实现缓存的最佳方案详解

　　
    　　<李>首页→pageAList,跳转第二页→首页→pageAList,页码显示第一页,说明从其他页面进入pageAList, pageAList页面没有被缓存李 　　<李> pageAList,跳转到第三页,点击视频22→进入视频详情页pageADetail,点击收藏,收藏成功,点击返回→pageAList显示的是第三页,并且视频22的收藏状态从未收藏变成已收藏,说明从pageADetail进入pageAList, pageAList页面缓存了,并且更新了状态李 　　
　　

说明: 　　

    　　<李>二级缓存:也就是从一个→B→,缓存一个李 　　<李>三级缓存:→B→C→B→,缓存,B 因为项目里面绝大部分是二级缓存,这里我们就做二级缓存,但是这不代表我的这个缓存方法不适用三级缓存,三级缓存后面我也会讲如何实现李 　　
　　


　　

　　

用vue-cli2的脚手架搭建了一个项目,用这个项目来说明如何实现
　　

　　

先来看看项目目录

　　

vue项目中实现缓存的最佳方案详解

　　

删除了无用的组件目录和资产目录,新增了src/页目录和src/存储目录,页页面用来存放页面组件,商店不多说,存放vuex相关的东西,新增了服务器/应用程序。js目录,用来启动后台服务
　　

　　

<强> 1。前提条件

　　
    　　<李>项目引入vue, vuex, vue-router, axios等vue全家桶李 　　<李>引入element-ui,只是为了项目美观,毕竟本人懒癌晚期,不想自己写样式李 　　<李>在配置/index.js里面配置前端代理李 　　
　　

vue项目中实现缓存的最佳方案详解

　　
    　　<李>引入表达,启动后台,后端开3003端口,给前端提供api支持,来看看服务端代码服务器/app.js,非常简单,就是造了30条数据,写了3个接口,几十行文件直接搭建了一个节点服务器,简单粗暴解决数据模拟问题,会模拟用模拟也行李 　　
　　 　　 　　const表达=要求(表达)//const bodyParser=要求(体) 　　const应用=表示() 　　让allList=Array.from({长度:30},(v, i)=比;({ 　　id:我, 　　名称:“视频' +我, 　　isCollect:假 　　}))//后台设置允许跨域访问//前后端都是本地localhost,所以不需要设置歌珥跨域,如果是部署在服务器上,则需要设置//app.all(‘*’,函数(下)要求,res, {//res.header (‘Access-Control-Allow-Origin’,‘*’)//res.header (“Access-Control-Allow-Headers”、“X-Requested-With”)//res.header (“Access-Control-Allow-Methods”、“PUT、POST、GET、删除选项”)//res.header (“X-Powered-By”、“3.2.1”)//res.header(“内容类型”、“application/json; charset=utf - 8”)//next ()//}) 　　app.use (express.json ()) 　　app.use(表达。urlencoded({扩展:假}))//1获取所有的视频列表 　　app.get (/api/getVideoList,函数(点播,res) { 　　让查询=req.query 　　让currentPage=query.currentPage 　　让页大?query.pageSize 　　让=allList列表。片((当前页- 1)*页大小,当前页*页大小) 　　res.json ({ 　　代码:0, 　　数据:{ 　　列表, 　　总:allList.length 　　} 　　}） 　　}）//2获取某一条视频详情 　　app.get (/api/getVideoDetail: id,函数(点播,res) { 　　让id=号(req.params.id) 　　让信息=allList。找到(v=比;v。id===id) 　　res.json ({ 　　代码:0, 　　数据:信息 　　}） 　　}）//3收藏或者取消收藏视频 　　app.post (/api/collectVideo,函数(点播,res) { 　　让id=号(req.body.id) 　　让isCollect=req.body.isCollect 　　allList=allList。地图((v, i)=比;{ 　　返回v。id===id & # 63;{…v, v isCollect}: 　　}） 　　res.json({代码:0}) 　　}） 　　const端口=3003 　　app.listen(港口,函数(){ 　　控制台。日志(“应用程序监听端口”+端口) 　　})

vue项目中实现缓存的最佳方案详解