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
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。