关于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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
JavaScript的面向对象(一)
Nov 09 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
vue 实现动态路由的方法
Jul 06 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生成静态页面教程
2012/01/10 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
Python中的作用域规则详解
2015/01/30 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
浅谈Python NLP入门教程
2017/12/25 Python
Python交互环境下实现输入代码
2018/06/22 Python
django 环境变量配置过程详解
2019/08/06 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
教师评优事迹材料
2014/01/10 职场文书
研究生毕业鉴定
2014/01/29 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
宣传口号大全
2014/06/16 职场文书
管理工程专业求职信
2014/08/10 职场文书
干部对照检查材料范文
2014/08/26 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS