Fetch products inside Vuex and display them using `ProductCard`

components.

1 files changed, 16 insertions, 1 deletions

diff --git a/client/src/store/index.js b/client/src/store/index.js
index 5f05f19..d2fe9b7 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -1,11 +1,26 @@
-import { createStore } from 'vuex'
+import {createStore} from 'vuex'
+import axios from 'axios';
 
 export default createStore({
   state: {
+    products: []
+  },
+  getters: {
+    getProducts(state) {
+      return state.products;
+    }
   },
   mutations: {
+    setProducts(state, products) {
+      state.products = products;
+    }
   },
   actions: {
+    async pullProducts(context) {
+      await axios.get(`${process.env.VUE_APP_ROOT_API}/products`)
+        .then(response => context.commit('setProducts', response.data))
+        .catch(error => console.error(error));
+    }
   },
   modules: {
   }