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方法 实时同步存储数据的更多相关文章

  1. HTML5中两种方法实现客户端存储数据

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...

  2. vue中代理实现方法

    vue中代理实现方法如下: const path = require('path'); function resolve(dir) { return path.join(__dirname, dir) ...

  3. 使用Logstash来实时同步MySQL数据到ES

    上篇讲到了ES和Head插件的环境搭建和配置,也简单模拟了数据作测试 本篇我们来实战从MYSQL里直接同步数据 一.首先下载和你的ES对应的logstash版本,本篇我们使用的都是6.1.1 下载后使 ...

  4. Vue中使用mui方法

    第一步 下载 下载网址:http://dev.dcloud.net.cn/mui/ui/ 点击GitHub进行下载 第二步 Vue中引入Mui 将下载好的文件解压 把文件中dist中的三个文件复制到自 ...

  5. vue中methods一个方法调用另外一个方法

    转自http://blog.csdn.net/zhangjing1019/article/details/77942923 vue在同一个组件内: methods中的一个方法调用methods中的另外 ...

  6. 解决Vue中文本输入框v-model双向绑定后数据不显示的问题

    前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...

  7. sersync 实时同步网站数据

    sersync同步实战 sersync是基于inotify和srync的二次开发,代码托管在github上面在rsync的客户端上安装,下载地址: https://raw.githubusercont ...

  8. 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 ...

  9. VUE中父组件向子组件传递数据 props使用

    VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...

随机推荐

  1. Spring Cloud中的负载均衡策略

    在上篇博客(Spring Cloud中负载均衡器概览)中,我们大致的了解了一下Spring Cloud中有哪些负载均衡器,但是对于负载均衡策略我们并没有去详细了解,我们只是知道在BaseLoadBal ...

  2. 如何发起、防御和测试XSS攻击,我们用DVWA来学习(下)

    上一篇我们了解了XSS攻击的原理,并且利用DVWA尝试了简单的XSS攻击,这一篇我们来实现更复杂的攻击,然后探讨防御机制和测试理念. 前面我们通过脚本注入让网页弹出了用户cookie信息,可以光弹窗是 ...

  3. 大战Java虚拟机【0】——目录

    发现一直在上层应用更新博客的我,突然发现也是时候同时更新一波基础知识了.然后就发现了一个点我还没有更新过,那就是Java虚拟机. 很多人在学习Java的时候都或多或少接触过一点,然后几乎有下面几种情况 ...

  4. spring框架应用系列二:component-scan自动扫描注册装配

    component-scan自动扫描注册装配 本文系作者原创,转载请注明出处:http://www.cnblogs.com/further-further-further/p/7717331.html ...

  5. Linux常用监控命令简介 - top

    top -hv | -bcisS -d delay -n iterations -p pid [, pid ...] 指令介绍-b : 批次模式运行.-c : 显示执行任务的命令行.-d : 设定延迟 ...

  6. jmeter 分布式压测(windows)

    单台压测机通常会遇到客户端瓶颈,受制于客户机的性能.可能由于网络带宽,CPU,内存的限制不能给到服务器足够的压力,这个时候你就需要用到分布式方案来解决客户机的瓶颈,压测的结果也会更加接近于真实情况. ...

  7. Joda-Time开源库

    Joda-Time是一个面向 Java™ 平台的易于使用的开源时间日期库. 依赖 <dependency> <groupId>joda-time</groupId> ...

  8. rpm和yum软件管理(week2_day5)--技术流ken

    rpm简介 这是一个数据库管理工具,可以通过读取数据库,判断软件是否已经安装,如果已经安装可以读取出来所有文件的所在位置等,并可以实现删除这些文件. rpm:RPM is Redhat Package ...

  9. VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——AlbumView相册控件的使用方式

    AlbumView控件 一.          样式一 我们要实现上图中的效果,需要如下的操作: 从工具栏上的“Smobiler Components”拖动一个AlbumView控件到窗体界面上 修改 ...

  10. DSAPI多功能组件编程应用-反射相关

    [DSAPI.DLL下载地址]       在.Net中,反射技术是一种入门困难,熟用快速的东西,对于没有接触过反射技术的程序员来说的确是头疼的,看一旦自己写过了,上手就非常简单了.在本节,将部分.N ...