add some vuex mutations and actions

src/components/TodoItem.vue

@@ -18,16 +18,22 @@
       type="button"
       class="btn-close btn-sm ms-2"
       aria-label="Remove todo"
+      @click="removeTodo(todo)"
     ></button>
   </li>
 </template>
 
 <script>
+import { mapActions } from "vuex";
+
 export default {
   name: "TodoItem",
   props: {
     todo: Object,
   },
+  methods: {
+    ...mapActions(["removeTodo"]),
+  },
 };
 </script>
 

src/store/index.js

@@ -10,9 +10,35 @@ const state = {
   ],
 };
 
+// mutations
+const mutations = {
+  addTodo(state, todo) {
+    state.todos.push(todo);
+  },
+
+  removeTodo(state, todo) {
+    state.todos.splice(state.todos.indexOf(todo), 1);
+  },
+};
+
+// actions
+const actions = {
+  addTodo({ commit }, text) {
+    commit("addTodo", {
+      id: Date.now(),
+      text,
+      done: false,
+    });
+  },
+
+  removeTodo({ commit }, todo) {
+    commit("removeTodo", todo);
+  },
+};
+
 export default createStore({
   state,
-  mutations: {},
-  actions: {},
+  mutations,
+  actions,
   modules: {},
 });

src/views/Home.vue

@@ -7,6 +7,7 @@
     autocomplete="off"
     aria-label="New todo text"
     placeholder="What needs to be done?"
+    @keyup.enter="addTodo"
   />
   <ul class="list-group">
     <TodoItem v-for="todo in todos" :key="todo.id" :todo="todo" />
@@ -27,5 +28,17 @@ export default {
       return this.$store.state.todos;
     },
   },
+  methods: {
+    addTodo(e) {
+      const text = e.target.value;
+      if (text.trim()) {
+        // Add new todo
+        this.$store.dispatch("addTodo", text);
+
+        // Clear input text
+        e.target.value = "";
+      }
+    },
+  },
 };
 </script>