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的状态

Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容