11.3 Connect Search Bar to Vuex State with mapState

src/components/Tasks/Tools/Search.vue

@@ -16,11 +16,14 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'Search',
-  data () {
-    return {
-      searchField: ''
+  computed: {
+    ...mapState('tasks', ['search']),
+    searchField () {
+      return this.search
     }
   }
 

src/store/store-tasks.js

@@ -23,7 +23,8 @@ const state = {
       dueTime: '16:30'
     }
     */
-  }
+  },
+  search: ''
 }
 
 const mutations = {