fix various things

2021-05-05 16:36:45 +02:00 · 2021-05-05 16:36:45 +02:00 · d49a65e88d
parent 904e4c3239
commit d49a65e88d
5 changed files with 94 additions and 101 deletions
--- a/2021-05-05_vuex-11-a-challenge-starting-code/package-lock.json
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/package-lock.json
@ -1754,6 +1754,16 @@
          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
          "dev": true
        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
        "cacache": {
          "version": "13.0.1",
          "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@ -1780,6 +1790,53 @@
            "unique-filename": "^1.1.1"
          }
        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
        "ssri": {
          "version": "7.1.0",
          "resolved": "https://registry.npmjs.org/ssri/-/ssri-7.1.0.tgz",
@ -1790,6 +1847,16 @@
            "minipass": "^3.1.1"
          }
        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
        "terser-webpack-plugin": {
          "version": "2.3.8",
          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@ -1806,6 +1873,18 @@
            "terser": "^4.6.12",
            "webpack-sources": "^1.4.3"
          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.2.0",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
+          "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
        }
      }
    },
@ -11229,87 +11308,6 @@
        }
      }
    },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.2.0",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
-      "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
    "vue-router": {
      "version": "4.0.6",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.6.tgz",
--- a/2021-05-05_vuex-11-a-challenge-starting-code/src/components/cart/CartItem.vue
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/src/components/cart/CartItem.vue
@ -16,7 +16,7 @@
        </div>
      </div>
      <div class="item__total">Total: ${{ itemTotal }}</div>
-      <button @click="removeProductFromCart">Remove</button>
+      <button @click="removeProductFromCart(prodId)">Remove</button>
    </div>
  </li>
 </template>
@ -25,7 +25,6 @@
 import { mapActions } from 'vuex';

 export default {
-  inject: ['removeProductFromCart'],
  props: ['prodId', 'title', 'image', 'price', 'qty'],
  computed: {
    itemTotal() {
--- a/2021-05-05_vuex-11-a-challenge-starting-code/src/components/products/ProductItem.vue
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/src/components/products/ProductItem.vue
@ -13,25 +13,21 @@
      </div>
    </div>
    <div class="product__actions">
-      <button @click="addToCart">Add to Cart</button>
+      <button @click="addProductToCart({ id, title, price, image })">
+        Add to Cart
+      </button>
    </div>
  </li>
 </template>

 <script>
+import { mapActions } from 'vuex';
+
 export default {
-  inject: ['addProductToCart'],
  props: ['id', 'image', 'title', 'price', 'description'],
  methods: {
-    addToCart() {
-      this.addProductToCart({
-        id: this.id,
-        image: this.image,
-        title: this.title,
-        price: this.price,
-      });
-    },
-  },
+    ...mapActions('cart', ['addProductToCart'])
+  }
 };
 </script>

@ -83,4 +79,4 @@ button:active {
  background-color: #760ab4;
  border-color: #760ab4;
 }
-</style>
+</style>
--- a/2021-05-05_vuex-11-a-challenge-starting-code/src/pages/UserCart.vue
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/src/pages/UserCart.vue
@ -2,7 +2,7 @@
  <section>
    <h2>Your Cart</h2>
    <h3>
-      Total Amount: <base-badge mode="elegant">${{ finalTotal }}</base-badge>
+      Total Amount: <base-badge mode="elegant">${{ total }}</base-badge>
    </h3>
    <ul>
      <cart-item
@ -24,11 +24,11 @@ import { mapGetters } from 'vuex';

 export default {
  computed: {
-    ...mapGetters('cart', ['items', 'finalTotal'])
+    ...mapGetters('cart', ['items', 'total'])
  },
  components: {
    CartItem
-  },
+  }
 };
 </script>

--- a/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/cart/actions.js
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/cart/actions.js
@ -1,8 +1,8 @@
 export default {
  addProductToCart(context, payload) {
-    context.commit('addProductToCart', payload)
+    context.commit('addProductToCart', payload);
  },
  removeProductFromCart(context, payload) {
-    context.commit('removeProductFromCart', payload)
+    context.commit('removeProductFromCart', payload);
  }
-}
+};