todo-list案例 本地存储

<— App.vue —>

   <template>
       <div id="root">
           <div class="todo-container">
               <div class="todo-wrap">
	             <MyHeader :addTodo="addTodo"/>
		         <MyList 
			         :todos="todos" 
			         :checkTodo="checkTodo" 
			         :deleteTodo="deleteTodo"
		         />
		         <MyFooter 
			         :todos="todos" 
			         :checkAllTodo="checkAllTodo" 
			         :clearAllTodo="clearAllTodo"
		         />
		       </div>
	       </div>
       </div>
   </template>
   
   <script>
       import MyHeader from './components/MyHeader.vue'
       import MyList from './components/MyList.vue'
       import MyFooter from './components/MyFooter.vue'
       export default {
           name: 'App',
           components:{
              MyHeader,
              MyList,
              MyFooter
           },
           data(){
              return {
                 //不使用写死的数据，采用本地存储读取用户动态数据
                 //JSON.parse 将本地存储中的json字符串解析转化为数组形式读取
                 // || [] 防止数据为空时报错，localStorage里没有数据时页面读取的todos是null,
                 //todos没有length的属性所以一定会报错，因此 || [] 是必要的条件
                 todos: JSON.parse(localStorage.getItem('todos')) || []
              }
           },
           methods: {
              //添加一个todo
              addTodo(todo) {
                 this.todos.unshift(todo)
              },
              //勾选或取消勾选一个todo
              checkTodo(id) {
                 this.todos.forEach((todo)=> {
                    if(todo.id === id) {
                       todo.done = !todo.done
                    }
                 })
              },
              //删除一个todo
              deleteTodo(id) {
                this.todos = this.todos.filter((todo)=> {
                      return todo.id !== todo.id
                 })
              },
              //全选 or 取消全选
              checkAllTodo(done) {
                 this.todos.foreach((todo)=> {
                      return todo.done = done
                 })
              },
              //清除所有已完成的todo
              clearAllTodo() {
                 this.todos = this.todos.filter((todo)=>{
                    return !todo.done
                 })
              }
           },
           //监听数据变化
           watch() {
              //这是监视的简写形式监听不到深层次（是否勾选）
              //方法（1）
              todos:(value) {
                 //将用户编辑的数据存储到本地存储localStorage中
                 //JSON.stringify将数组形式的数据转化为字符串形式存储在localStorage中
                 localStorage.setItem('todos',JSON.stringify(value))
              },
              //监视的完整形式（可以监听到是否勾选），采用方法（2）
              //方法（2）
              todos:() {
                 handler(value) {
                    deep: true, //开启深度监视
                    localStorage.setItem('todos',JSON.stringify(value))
                 }
              }
           }
       }
   </script>

   <style>
      /*base*/
      body {
         background-color: #fff;
      }
      .btn {
         display: inline-block;
         padding: 4px 12px;
         margin-bottom: 0;
         font-size: 14px;
         line-height: 20px;
         text-align: center;
         vertical-align: middle;
         cursor: pointer;
         box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
         border-radius: 4px;
      }
      .btn-danger {
         color: #fff;
         background-color: #da4f49;
         border:1px solid #bd362f;
      }
      .btn-danger:hover {
         color:#fff;
         background-color: #bd362f;
      }
      .btn:focus {
         outline: none;
      }
      .todo-container {
         width: 600px;
         margin: 0 auto;
      }
      .todo-container .todo-wrap {
         padding: 10px;
         border:1px solid #ddd;
         border-radius: 5px;
      }
   </style>