feat: manage TodoItems in App.vue

Author: irisdew

doit/todo/src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <TodoHeader />
-  <TodoInput />
-  <TodoList />
-  <TodoFooter />
+  <TodoInput @addTodo="addTodo" />
+  <TodoList :todoItems="todoItems" @removeTodo="removeTodo" />
+  <TodoFooter @removeAll="clearAll" />
 </template>
 
 <script>
@@ -19,6 +19,33 @@ export default {
     TodoList,
     TodoFooter,
   },
+  data() {
+    return {
+      todoItems: [],
+    };
+  },
+  methods: {
+    clearAll() {
+      localStorage.clear();
+      this.todoItems = [];
+    },
+    addTodo(newTodoItem) {
+      localStorage.setItem(newTodoItem, newTodoItem);
+      this.todoItems.push(newTodoItem);
+    },
+    removeTodo(todoItem, index) {
+      localStorage.removeItem(todoItem);
+      this.todoItems.splice(index, 1);
+    },
+  },
+  created() {
+    // 뷰 인스턴스가 생성되자마자 뷰 데이터에 접근할 수 있도록 created()에서 로컬스토리지 데이터를 뷰 데이터로 옮김
+    if (localStorage.length > 0) {
+      for (let i = 0; i < localStorage.length; i++) {
+        this.todoItems.push(localStorage.key(i));
+      }
+    }
+  },
 };
 </script>
 

doit/todo/src/components/HelloWorld.vue

@@ -8,7 +8,7 @@
 export default {
   methods: {
     clearTodo() {
-      localStorage.clear();
+      this.$emit("removeAll");
     },
   },
 };

doit/todo/src/components/TodoFooter.vue

@@ -4,7 +4,7 @@
       type="text"
       v-model="newTodoItem"
       placeholder="Things I have to do..."
-      @keyup.enter="addTodo"
+      @keypress.enter="addTodo"
     />
     <span class="addContainer" @click="addTodo">
       <i class="addBtn fas fa-plus" aria-hidden="true"></i>
@@ -23,13 +23,17 @@ export default {
     addTodo() {
       if (this.newTodoItem !== "") {
         const value = this.newTodoItem && this.newTodoItem.trim();
-        localStorage.setItem(value, value);
+        this.$emit("addTodo", value);
         this.clearInput();
       }
     },
     clearInput() {
       this.newTodoItem = "";
     },
+    removeTodo(todoItem, index) {
+      localStorage.removeItem(todoItem);
+      this.todoItems.splice(index, 1);
+    },
   },
 };
 </script>

doit/todo/src/components/TodoInput.vue

@@ -18,23 +18,10 @@
 
 <script>
 export default {
-  data() {
-    return {
-      todoItems: [],
-    };
-  },
-  created() {
-    // 뷰 인스턴스가 생성되자마자 뷰 데이터에 접근할 수 있도록 created()에서 로컬스토리지 데이터를 뷰 데이터로 옮김
-    if (localStorage.length > 0) {
-      for (let i = 0; i < localStorage.length; i++) {
-        this.todoItems.push(localStorage.key(i));
-      }
-    }
-  },
+  props: ["todoItems"],
   methods: {
     removeTodo(todoItem, index) {
-      localStorage.removeItem(todoItem);
-      this.todoItems.splice(index, 1);
+      this.$emit("removeTodo", todoItem, index);
     },
   },
 };