关于vue路由缓存清除在main.js中的设置


Posted in Javascript onNovember 06, 2019

1.main.js

/* 页面数据缓存 */
var _CACHE_OBJS = {};
 
function _init_cache(comp, key, cache) {
 var obj = cache[key];
 if (obj !== undefined) {
 comp[key] = obj;
 }
 var deep = typeof comp[key] === 'object';
 comp.$watch(key,
 function (val) {
  //console.log("page " + key + " updated");
  cache[key] = val;
 }, {
  deep: deep
 });
}
 
 
var _PAGE_CACHE = {
 /*
 * 初始化页面缓存数据
 * comp: 当前页面component 对象
 * path: 当前页面vue router path
 * data: 需要缓存的数据对象名称,或名称数组
 */
 cache: function (comp, path, data) {
 if (data == '' || data == undefined || data == null) {
  data = restore(comp._data);
 }
 var cache = _CACHE_OBJS[path];
 if (cache === undefined) {
  cache = {};
  _CACHE_OBJS[path] = cache;
 }
 if (typeof data == 'string') {
  _init_cache(comp, data, cache);
 } else {
  var i;
  for (i = 0; i < data.length; ++i) {
  _init_cache(comp, data[i], cache);
  }
 }
 console.log(_CACHE_OBJS, "页面数据缓存");
 },
 
 /* 清除页面缓存 */
 clear: function (path) {
 delete _CACHE_OBJS[path];
 },
 
 /* 清空所有缓存数据 */
 reset: function () {
 //console.log("reset page cache");
 _CACHE_OBJS = {};
 },
 /*根据path查看当前页面缓存是否存在*/
 has_cache: function (path) {
 return _CACHE_OBJS[path] !== undefined && !isEmptyObject(_CACHE_OBJS[path]);
 }
};
 
Vue.prototype.$cache = _PAGE_CACHE;
/* eslint-disable no-new */
 
var restore = function (vueObject) {
 var result = [];
 for (var index in vueObject) {
 result.push(index);
 }
 return result;
};
 
var isEmptyObject = function (obj) {
 for (var key in obj) {
 return false;
 }
 return true;
}

以上这篇关于vue路由缓存清除在main.js中的设置就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
JavaScript异步操作中串行和并行
Nov 20 Javascript
JS实现随机抽取三人
Nov 06 #Javascript
Node对CommonJS的模块规范
Nov 06 #Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 #Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 #Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 #Javascript
js+html实现点名系统功能
Nov 05 #Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 #Javascript
You might like
php中函数的形参与实参的问题说明
2010/09/01 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
php生成图片缩略图的方法
2015/04/07 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
深入探究node之Transform
2017/07/20 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
python 编写简单网页服务器的实例
2018/06/01 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
Django日志及中间件模块应用案例
2020/09/10 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
大专生自我评价
2014/01/28 职场文书
财务总监岗位职责
2014/03/07 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
深入理解go slice结构
2021/09/15 Golang