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
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。