11.5 Setup an Action & Mutation to set the search property

src/components/Tasks/Tools/Search.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   name: 'Search',
@@ -26,10 +26,14 @@ export default {
       get () {
         return this.search
       },
-      set (value) {}
+      set (value) {
+        this.setSearch(value)
+      }
     }
+  },
+  methods: {
+    ...mapActions('tasks', ['setSearch'])
   }
-
 }
 </script>
 

src/store/store-tasks.js

@@ -36,6 +36,9 @@ const mutations = {
   },
   addTask (state, payload) {
     Vue.set(state.tasks, payload.id, payload.task)
+  },
+  setSearch (state, value) {
+    state.search = value
   }
 }
 
@@ -53,6 +56,9 @@ const actions = {
       task: task
     }
     commit('addTask', payload)
+  },
+  setSearch ({ commit }, value) {
+    commit('setSearch', value)
   }
 }