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