关于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的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
js获取json元素数量的方法
Jan 27 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
sklearn的predict_proba使用说明
2020/06/28 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
新年晚会主持词
2014/03/24 职场文书
党建工作经验交流材料
2014/05/25 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
学生病假条怎么写
2015/08/17 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
会议主持词通用版
2019/04/02 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js