11.2 Getters for Todo and Complete

src/pages/PageTodo.vue

@@ -1,12 +1,12 @@
 <template>
   <q-page class="q-pa-md">
     <q-list
-      v-if="Object.keys(tasks).length"
+      v-if="Object.keys(tasksTodo).length"
       separator
       bordered>
 
       <task
-        v-for="(task, key) in tasks"
+        v-for="(task, key) in tasksTodo"
         :key="key"
         :task="task"
         :id="key"
@@ -42,11 +42,11 @@ export default {
   },
   data () {
     return {
-      showAddTask: true
+      showAddTask: false
     }
   },
   computed: {
-    ...mapGetters('tasks', ['tasks'])
+    ...mapGetters('tasks', ['tasksTodo'])
   }
 }
 </script>

src/store/store-tasks.js

@@ -56,8 +56,25 @@ const actions = {
 }
 
 const getters = {
-  tasks: (state) => {
+  tasksTodo: (state) => {
-    return state.tasks
+    const tasks = {}
+    Object.keys(state.tasks).forEach(function (key) {
+      const task = state.tasks[key]
+      if (!task.completed) {
+        tasks[key] = task
+      }
+    })
+    return tasks
+  },
+  tasksCompleted: (state) => {
+    const tasks = {}
+    Object.keys(state.tasks).forEach(function (key) {
+      const task = state.tasks[key]
+      if (task.completed) {
+        tasks[key] = task
+      }
+    })
+    return tasks
   }
 }