From b2f481d4b0b2c3649800689aca41150f0e2ac207 Mon Sep 17 00:00:00 2001
From: Fredrick W Warren <fredwarren@gmail.com>
Date: Thu, 11 Feb 2021 07:42:29 -0800
Subject: [PATCH] 13.6 Link the Sort Dropdown to the Vuex Store State

---
 src/components/Tasks/Tools/Sort.vue | 17 ++++++++++++++++-
 src/store/store-tasks.js            |  6 ++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/Tasks/Tools/Sort.vue b/src/components/Tasks/Tools/Sort.vue
index 3ee9446..fedc2d2 100644
--- a/src/components/Tasks/Tools/Sort.vue
+++ b/src/components/Tasks/Tools/Sort.vue
@@ -12,11 +12,12 @@
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex'
+
 export default {
   name: 'Sort',
   data () {
     return {
-      sortBy: null,
       options: [
         {
           label: 'Name',
@@ -28,6 +29,20 @@ export default {
         }
       ]
     }
+  },
+  computed: {
+    ...mapState('tasks', ['sort']),
+    sortBy: {
+      get () {
+        return this.sort
+      },
+      set (value) {
+        this.setSort(value)
+      }
+    }
+  },
+  methods: {
+    ...mapActions('tasks', ['setSort'])
   }
 }
 </script>
diff --git a/src/store/store-tasks.js b/src/store/store-tasks.js
index 667ecea..24fb1c2 100644
--- a/src/store/store-tasks.js
+++ b/src/store/store-tasks.js
@@ -40,6 +40,9 @@ const mutations = {
   },
   setSearch (state, value) {
     state.search = value
+  },
+  setSort (state, value) {
+    state.sort = value
   }
 }
 
@@ -60,6 +63,9 @@ const actions = {
   },
   setSearch ({ commit }, value) {
     commit('setSearch', value)
+  },
+  setSort ({ commit }, value) {
+    commit('setSort', value)
   }
 }