12.2. Add Sorting Getter to Vuex Store

src/store/store-tasks.js

@@ -63,11 +63,29 @@ const actions = {
 }
 
 const getters = {
-  tasksFiltered: (state) => {
+  tasksSorted: (state) => {
+    const tasksSorted = {}
+    const keysOrdered = Object.keys(state.tasks)
+
+    keysOrdered.sort((a, b) => {
+      const taskAProp = state.tasks[a].name.toLowerCase()
+      const taskBProp = state.tasks[b].name.toLowerCase()
+      if (taskAProp > taskBProp) return 1
+      else if (taskAProp < taskBProp) return -1
+      else return 0
+    })
+
+    keysOrdered.forEach((key) => {
+      tasksSorted[key] = state.tasks[key]
+    })
+    return tasksSorted
+  },
+  tasksFiltered: (state, getters) => {
+    const tasksSorted = getters.tasksSorted
     const tasksFiltered = {}
     if (state.search) {
-      Object.keys(state.tasks).forEach(function (key) {
-        const task = state.tasks[key],
+      Object.keys(tasksSorted).forEach(function (key) {
+        const task = tasksSorted[key],
           taskNameLowerCase = task.name.toLowerCase(),
           searchLowerCase = state.search.toLowerCase()
         if (taskNameLowerCase.includes(searchLowerCase)) {
@@ -76,7 +94,7 @@ const getters = {
       })
       return tasksFiltered
     }
-    return state.tasks
+    return tasksSorted
   },
   tasksTodo: (state, getters) => {
     const tasksFiltered = getters.tasksFiltered