Acciones

src/components/AppProductList.vue

@@ -12,14 +12,14 @@
 </template>
 
 <script>
-import api from "../api/shop.js";
 export default {
   name: "AppProductList",
-  created() {
-    api.getProducts(products => {
-      // this.products = products;
-      this.$store.commit("setProducts", products);
-    });
+  async created() {
+    try {
+      await this.$store.dispatch("getProducts");
+    } catch (error) {
+      console.error(error);
+    }
   },
   computed: {
     products() {

src/store/index.js

@@ -1,5 +1,6 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import api from "../api/shop.js";
 
 Vue.use(Vuex);
 
@@ -12,6 +13,15 @@ export default new Vuex.Store({
       state.products = products;
     }
   },
-  actions: {},
+  actions: {
+    getProducts({ commit }) {
+      return new Promise(resolve => {
+        api.getProducts(products => {
+          commit("setProducts", products);
+          resolve();
+        });
+      });
+    }
+  },
   modules: {}
 });