最好能将上述代码抽取成一个模块(读json数据+写json数据)

1.在src下新建文件夹util(util文件夹用于放入工具的模块)

2.*使用localStorage存储数据的工具模块
* 一个模块需要想外暴露某些东西
* 1.函数(1个函数为1个功能)
* 2.对象(对象可以包含多个功能,因为对象中可以包含多个方法)
* 究竟选择暴露函数还是对象?选择依据:需要一个功能还是多个功能
* 1个功能用函数,多个功能用对象
而我们现在1个读,1个写,所以需要两个方面的功能,故向外暴露对象




3.引入文件






理解:handler : storageUtil.saveTodos


分析:首先handler值是一个回调函数,现在storageUtil这个函数给它了,storageUtil.saveTodos根据属性名取值,ctrl+左键点击saveTodos,就会跳入函数中,而saveTodos函数正好能完成这个功能.


 
												


											
(尚034)Vue_案例_数据存储优化(代码优化!!!)的更多相关文章
	

    
								
  1. (尚030)Vue_案例_存储数据(localStorage本地存储技术)
		
    当刷新页面时,会变为原来的状态 1.问题:当我刷新是不希望改变原来状态 需要缓存我当前的数据 2.究竟是缓存在内存里还是在文件里??? 缓存在文件里,因为浏览器关闭了,内存就没了;而我们需要重新打开浏 ...
    
		
    2. 
						
  2. (尚032)Vue_案例_消息订阅与发布(组件订阅与发布(PubSubJS库))
		
    组件订阅与发布(PubSubJS库) npm info pubsub-js 安装库 npm install --save pubsub -js ============================ ...
    
		
    3. 
						
  3. (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
		
    自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...
    
		
    4. 
						
  4. (尚027)Vue_案例_交互添加
		
    TodoHeader.vue组件 写交互: 第一步:跟目标元素绑定监听 (1).按回车键确认@keyup.enter="add" (2). 注意:数据在哪个组件,更新数据的行为就应 ...
    
		
    5. 
						
  5. (尚026)Vue_案例_动态初始化显示(尚025)
		
    (1).当前页面需要变化什么样的数据? 答:列表;应该有个todos:[]数组;数组中包含每个元素均为一个对象;有数据titles:'xxx';(勾不勾选)complete:'布尔类型' (2).数组 ...
    
		
    6. 
						
  6. (尚024)Vue_案例_交互删除
		
    注意:本总结中最终会删除不成功 ,原因是Item.vue中方法methods单词拼写错误!!! 首先明白,删除在Item.vue中交互 1.写交互,首先写监听@click="deleteIt ...
    
		
    7. 
						
  7. (尚023)Vue_案例_交互添加
		
    最终达到效果: 1.做交互,首先需要确定操作哪个组件? 提交------操作组件Add.vue 2.从哪开始做起呢? 从绑定事件监听开始做起,确定你跟谁绑定事件监听,在回调函数中做什么, ====== ...
    
		
    8. 
						
  8. (尚029)Vue_案例_交互footer组件功能
		
    需要实现界面截图: 难点分析:sAllCheck必须定义为计算属性 1.想到问题: 一旦写一个组件,需要接收哪些属性?? 因为只有属性确定了,标签才好写 todos属性可以确定三个方面的显示 2.做交 ...
    
		
    9. 
						
  9. (尚028)Vue_案例_交互删除
		
    删除一条;1.鼠标移入移除这一条时颜色有变化 2.删除当前的todo ================================================================= ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. LR编写grammar中的问题和解决方法
			
    本文主要说明LR解析过程中关于BNF的典型冲突如何在LR中解决 冲突一般分为两种: shift/reduce错误 redure/redure错误 下面分别解释两种冲突 1. shift/reduce错 ...
    
			
    2. 
						
  2. FusionInsight大数据开发---Hive应用开发
			
    Hive应用开发 了解Hive的基本架构原理 掌握JDBC客户端开发流程 了解ODBC客户端的开发流程 了解python客户端的开发流程 了解Hcatalog/webHcat开发接口 掌握Hive开发 ...
    
			
    3. 
						
  3. Mysql系列（二）—— Mysql支持的数据类型
			
    Mysql版本众多,每个版本支持的数据类型繁多且不一样,本篇文章中主要基于MySQL Community Server 5.7.22介绍常用的数据类型,包括其特点以及区别. 一.数据类型 正确的定义表 ...
    
			
    4. 
						
  4. typing类型注解库
			
    简介 动态语言的灵活性使其在做一些工具,脚本时非常方便,但是同时也给大型项目的开发带来了一些麻烦. 自python3.5开始,PEP484为python引入了类型注解(type hints),虽然在p ...
    
			
    5. 
						
  5. Mycat分布式数据库架构解决方案--搭建MySQL读写分离环境--一主多从
			
    echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 本文主 ...
    
			
    6. 
						
  6. 【转载】C#使用InsertRange方法往ArrayList集合指定位置插入另一个集合
			
    在C#的编程开发中,ArrayList集合是一个常用的非泛型类集合,ArrayList集合可存储多种数据类型的对象.在实际的开发过程中,我们可以使用InsertRange方法在ArrayList集合指 ...
    
			
    7. 
						
  7. 学习笔记之操作系统（Operating System）
			
    学习笔记之多线程 - 浩然119 - 博客园 https://www.cnblogs.com/pegasus923/p/5554565.html 用三个线程按顺序循环打印ABC三个字母 - 浩然119 ...
    
			
    8. 
						
  8. JS 数组克隆方法总结(不可更改原数组)
			
    ES5 方法总结 1.slice let arr = [2,4,434,43]; let arr1= arr.slice();//let arr1 = arr.slice(0); arr[0] = ' ...
    
			
    9. 
						
  9. MES应用案例|新宏泰电器乘上智能制造的东风
			
    企业背景: 无锡新宏泰电器科技股份有限公司(下文简称:新宏泰电器)创立于1984年,公司主要生产断路器.微型电机.BMC/SMC材料.BMC/SMC模压制品及各类塑料模具的设计制造.已于2016年在沪 ...
    
			
    10. 
						
  10. Android Scroller简单用法实例
			
    Android里Scroller类是为了实现View平滑滚动的一个Helper 类.通常在自定义的View时使用,在View中定义一个私有成员mScroller = new Scroller(cont ...
    
			
    11.