13.6 Link the Sort Dropdown to the Vuex Store State

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>

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)
   }
 }