Create new fruit feature

src/store/actions.js

@@ -8,5 +8,20 @@ export default {
   getFruit: async ({ commit }, id) => {
     const response = await axios.get(`http://localhost:3000/fruit/${id}`);
     commit("setFruit", response.data);
+  },
+  getImageFromUnsplash: async (_, keyword) => {
+    const response = await axios.get(
+      `https://api.unsplash.com/search/photos?query=${keyword}&w=800&h=400`,
+      {
+        headers: {
+          Authorization: "Client-ID NjFwGYsnksnzH2uh12W55aobUpTe0h06oSVACd5cWt0",
+          "X-Total": 1
+        }
+      }
+    );
+
+    if (response.data.total === 0) throw new Error("0 found.");
+
+    return response.data.results[0];
   }
 };

src/store/index.js

@@ -6,7 +6,8 @@ import getters from "./getters";
 
 export const state = {
   fruits: [],
-  fruit: {}
+  fruit: {},
+  modalIsOpen: false
 };
 
 Vue.use(Vuex);

src/store/mutations.js

@@ -12,5 +12,8 @@ export default {
   },
   removeFruit: (state, id) => {
     state.fruits = state.fruits.filter(item => item.id != id);
+  },
+  toggleModal: state => {
+    state.modalIsOpen = !state.modalIsOpen;
   }
 };