vue--day44-todolist的localStorage本地存储

添加修改删除数据发生变化，可以用watch 监测来实现监测数据的变化

1. App.vue 

 

<template>

<div id="root">

<div class="todo-container">

<div class="todo-wrap">

<!--传递函数 儿子给父亲传东西,父亲偷偷传递一个函数，儿子调用这个函数-->

<MyHeader :addTodo="addTodo"/>

<!--父亲给儿子传数据 父亲通过数据绑定传数据 儿子通过 props:['todos'],//声明接收todo 对象 -->

<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 {

todos:JSON.parse(localStorage.getItem("todos"))||[]

}

 

},

methods:{

// 添加一个todo

addTodo(todoObj){

// console.log('我是app组件,我收到了数据x==',todoObj);

this.todos.unshift(todoObj)

},

//勾选or 取消勾选 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!==id;

})

},

//全选or全不选

checkAllTodo(done){

this.todos.forEach((todo)=>{

todo.done=done

})

},

clearAllTodo(){

this.todos=this.todos.filter((todo)=>{

return !todo.done

})

}

},

watch:{

// todos(value){

// localStorage.setItem("todos", JSON.stringify(value));

// }

todos:{

deep:true,

handler(value){

localStorage.setItem("todos", JSON.stringify(value));

}

}

}

}

</script>

<style>

/* 整体样式 */

body {

background: rgba(230, 241, 245, 0.816);

}

.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>