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