vue中的watch方法 实时同步存储数据
watch 监视模式里面有个独特的方法handler
注意要加上deep: true。deep为true时,当对象的key值改变时也监听
当值发生改变被watch监视到触发了事件
开始执行handler 把修改的值items放到封装好的函数save存储到浏览器本地存储
在data数据里面把items 默认读取浏览器的本地存储,fetch有做处理,如果没有值默认是一个空数组
localstorage get 和 set 的封装方法store.js
通过import Store from './store' 装载方法
const STORAGE_KEY = 'todos-vuejs'
export default {
fetch () {
return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
},
save (items){
window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
}
}
2.js原生存储方法:window.localStorage.setItem() , window.localStorage.getItem()
1.实时同步存储数据,使用vue.$watch观察数据的变化,从而来存储数据
2.这里deep为true,items中某一个item的键值对改变也会触发handler(),从而保存各个item的状态

还没测试,之前一直用vuex来结合localStorage结合使用
作者:blank的小粉er
链接:https://www.jianshu.com/p/dd3c6a8c4aee
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
vue中的watch方法 实时同步存储数据的更多相关文章
- HTML5中两种方法实现客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...
- vue中代理实现方法
vue中代理实现方法如下: const path = require('path'); function resolve(dir) { return path.join(__dirname, dir) ...
- 使用Logstash来实时同步MySQL数据到ES
上篇讲到了ES和Head插件的环境搭建和配置,也简单模拟了数据作测试 本篇我们来实战从MYSQL里直接同步数据 一.首先下载和你的ES对应的logstash版本,本篇我们使用的都是6.1.1 下载后使 ...
- Vue中使用mui方法
第一步 下载 下载网址:http://dev.dcloud.net.cn/mui/ui/ 点击GitHub进行下载 第二步 Vue中引入Mui 将下载好的文件解压 把文件中dist中的三个文件复制到自 ...
- vue中methods一个方法调用另外一个方法
转自http://blog.csdn.net/zhangjing1019/article/details/77942923 vue在同一个组件内: methods中的一个方法调用methods中的另外 ...
- 解决Vue中文本输入框v-model双向绑定后数据不显示的问题
前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...
- sersync 实时同步网站数据
sersync同步实战 sersync是基于inotify和srync的二次开发,代码托管在github上面在rsync的客户端上安装,下载地址: https://raw.githubusercont ...
- canal-1.1.5实时同步MySQL数据到Elasticsearch
一.环境准备 1.jkd 8+ 2.mysql 5.7+ 3.Elasticsearch 7+ 4.kibana 7+ 5.canal.adapter 1.1.5 二.部署 一.创建数据库CanalD ...
- VUE中父组件向子组件传递数据 props使用
VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...
随机推荐
- Spring Cloud中的负载均衡策略
在上篇博客(Spring Cloud中负载均衡器概览)中,我们大致的了解了一下Spring Cloud中有哪些负载均衡器,但是对于负载均衡策略我们并没有去详细了解,我们只是知道在BaseLoadBal ...
- 如何发起、防御和测试XSS攻击,我们用DVWA来学习(下)
上一篇我们了解了XSS攻击的原理,并且利用DVWA尝试了简单的XSS攻击,这一篇我们来实现更复杂的攻击,然后探讨防御机制和测试理念. 前面我们通过脚本注入让网页弹出了用户cookie信息,可以光弹窗是 ...
- 大战Java虚拟机【0】——目录
发现一直在上层应用更新博客的我,突然发现也是时候同时更新一波基础知识了.然后就发现了一个点我还没有更新过,那就是Java虚拟机. 很多人在学习Java的时候都或多或少接触过一点,然后几乎有下面几种情况 ...
- spring框架应用系列二:component-scan自动扫描注册装配
component-scan自动扫描注册装配 本文系作者原创,转载请注明出处:http://www.cnblogs.com/further-further-further/p/7717331.html ...
- Linux常用监控命令简介 - top
top -hv | -bcisS -d delay -n iterations -p pid [, pid ...] 指令介绍-b : 批次模式运行.-c : 显示执行任务的命令行.-d : 设定延迟 ...
- jmeter 分布式压测(windows)
单台压测机通常会遇到客户端瓶颈,受制于客户机的性能.可能由于网络带宽,CPU,内存的限制不能给到服务器足够的压力,这个时候你就需要用到分布式方案来解决客户机的瓶颈,压测的结果也会更加接近于真实情况. ...
- Joda-Time开源库
Joda-Time是一个面向 Java™ 平台的易于使用的开源时间日期库. 依赖 <dependency> <groupId>joda-time</groupId> ...
- rpm和yum软件管理(week2_day5)--技术流ken
rpm简介 这是一个数据库管理工具,可以通过读取数据库,判断软件是否已经安装,如果已经安装可以读取出来所有文件的所在位置等,并可以实现删除这些文件. rpm:RPM is Redhat Package ...
- VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——AlbumView相册控件的使用方式
AlbumView控件 一. 样式一 我们要实现上图中的效果,需要如下的操作: 从工具栏上的“Smobiler Components”拖动一个AlbumView控件到窗体界面上 修改 ...
- DSAPI多功能组件编程应用-反射相关
[DSAPI.DLL下载地址] 在.Net中,反射技术是一种入门困难,熟用快速的东西,对于没有接触过反射技术的程序员来说的确是头疼的,看一旦自己写过了,上手就非常简单了.在本节,将部分.N ...