Toggle deleteMode with button in Header

src/store/actions.js

@@ -18,7 +18,10 @@ export default {
   removeFruit: async ({ commit }, id) => {
     await axios
       .delete(`http://localhost:3000/fruit/${id}`)
-      .then(() => commit("removeFruit", id))
+      .then(() => {
+        commit("removeFruit", id);
+        commit("toggleDeleteMode");
+      })
       .catch(err => console.log(err));
   },
   getImageFromUnsplash: async ({ commit }, keyword) => {

src/store/index.js

@@ -8,7 +8,8 @@ export const state = {
   fruits: [],
   fruit: {},
   modalIsOpen: false,
-  loading: true
+  loading: true,
+  deleteMode: false
 };
 
 Vue.use(Vuex);

src/store/mutations.js

@@ -18,5 +18,8 @@ export default {
   },
   setLoading: (state, loading) => {
     state.loading = loading;
+  },
+  toggleDeleteMode: state => {
+    state.deleteMode = !state.deleteMode;
   }
 };