关于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实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
js AspxButton的客户端操作
Jun 26 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 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+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
jquery tools 系列 scrollable学习
2009/09/06 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
vue删除html内容的标签样式实例
2018/09/13 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
Python 2与Python 3版本和编码的对比
2017/02/14 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
思想政治自我鉴定
2013/10/06 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
国庆节演讲稿
2014/05/27 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
推广普通话主题班会
2015/08/17 职场文书
新手初学Java网络编程
2021/07/07 Java/Android
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL