various changes

2021-05-05_vuex-11-a-challenge-starting-code/src/App.vue

@@ -19,44 +19,11 @@ export default {
   provide() {
     return {
       isLoggedIn: this.isLoggedIn,
-      cart: this.cart,
-      addProductToCart: this.addProductToCart,
-      removeProductFromCart: this.removeProductFromCart,
       login: this.login,
       logout: this.logout,
     };
   },
   methods: {
-    addProductToCart(productData) {
-      const productInCartIndex = this.cart.items.findIndex(
-        (ci) => ci.productId === productData.id
-      );
-
-      if (productInCartIndex >= 0) {
-        this.cart.items[productInCartIndex].qty++;
-      } else {
-        const newItem = {
-          productId: productData.id,
-          title: productData.title,
-          image: productData.image,
-          price: productData.price,
-          qty: 1,
-        };
-        this.cart.items.push(newItem);
-      }
-      this.cart.qty++;
-      this.cart.total += productData.price;
-    },
-
-    removeProductFromCart(prodId) {
-      const productInCartIndex = this.cart.items.findIndex(
-        (cartItem) => cartItem.productId === prodId
-      );
-      const prodData = this.cart.items[productInCartIndex];
-      this.cart.items.splice(productInCartIndex, 1);
-      this.cart.qty -= prodData.qty;
-      this.cart.total -= prodData.price * prodData.qty;
-    },
     login() {
       this.isLoggedIn = true;
     },

2021-05-05_vuex-11-a-challenge-starting-code/src/components/cart/CartItem.vue

@@ -16,12 +16,14 @@
         </div>
       </div>
       <div class="item__total">Total: ${{ itemTotal }}</div>
-      <button @click="remove">Remove</button>
+      <button @click="removeProductFromCart">Remove</button>
     </div>
   </li>
 </template>
 
 <script>
+import { mapActions } from 'vuex';
+
 export default {
   inject: ['removeProductFromCart'],
   props: ['prodId', 'title', 'image', 'price', 'qty'],
@@ -31,9 +33,7 @@ export default {
     }
   },
   methods: {
-    remove() {
-      this.removeProductFromCart(this.prodId);
-    }
+    ...mapActions('cart', ['removeProductFromCart'])
   }
 };
 </script>
@@ -83,4 +83,4 @@ button:active {
   background-color: #53001c;
   border-color: #53001c;
 }
-</style>
+</style>

2021-05-05_vuex-11-a-challenge-starting-code/src/pages/UserCart.vue

@@ -1,10 +1,12 @@
 <template>
   <section>
     <h2>Your Cart</h2>
-    <h3>Total Amount: <base-badge mode="elegant">${{ cartTotal }}</base-badge></h3>
+    <h3>
+      Total Amount: <base-badge mode="elegant">${{ finalTotal }}</base-badge>
+    </h3>
     <ul>
       <cart-item
-        v-for="item in cart.items"
+        v-for="item in items"
         :key="item.productId"
         :prod-id="item.productId"
         :title="item.title"
@@ -18,17 +20,15 @@
 
 <script>
 import CartItem from '../components/cart/CartItem.vue';
+import { mapGetters } from 'vuex';
 
 export default {
-  inject: ['cart'],
-  components: {
-    CartItem,
-  },
   computed: {
-    cartTotal() {
-      return this.cart.total.toFixed(2);
-    }
-  }
+    ...mapGetters('cart', ['items', 'finalTotal'])
+  },
+  components: {
+    CartItem
+  },
 };
 </script>
 
@@ -46,7 +46,7 @@ h2 {
 }
 
 h3 {
- text-align: center;
+  text-align: center;
 }
 
 ul {
@@ -54,4 +54,4 @@ ul {
   margin: 0;
   padding: 0;
 }
-</style>
+</style>

2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/cart/actions.js

@@ -0,0 +1,8 @@
+export default {
+  addProductToCart(context, payload) {
+    context.commit('addProductToCart', payload)
+  },
+  removeProductFromCart(context, payload) {
+    context.commit('removeProductFromCart', payload)
+  }
+}

2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/cart/getters.js

@@ -0,0 +1,5 @@
+export default {
+  finalTotal(state) {
+    return state.total.toFixed(2);
+  }
+};

2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/cart/index.js

@@ -1,11 +1,17 @@
-//import counterActions from './actions.js';
-//import counterGetters from './getters.js';
-//import counterMutations from './mutations.js';
+import cartActions from './actions.js';
+import cartGetters from './getters.js';
+import cartMutations from './mutations.js';
 
 export default {
   namespaced: true,
   state() {
     return {
+      items: [],
+      total: 0,
+      qty: 0
     };
   },
+  actions: cartActions,
+  getters: cartGetters,
+  mutations: cartMutations
 };

2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/cart/mutations.js

@@ -0,0 +1,32 @@
+export default {
+  addProductToCart(state, productData) {
+    const productInCartIndex = state.items.findIndex(
+      ci => ci.productId === productData.id
+    );
+
+    if (productInCartIndex >= 0) {
+      state.items[productInCartIndex].qty++;
+    } else {
+      const newItem = {
+        productId: productData.id,
+        title: productData.title,
+        image: productData.image,
+        price: productData.price,
+        qty: 1
+      };
+      state.items.push(newItem);
+    }
+    state.qty++;
+    state.total += productData.price;
+  },
+
+  removeProductFromCart(state, prodId) {
+    const productInCartIndex = state.items.findIndex(
+      cartItem => cartItem.productId === prodId
+    );
+    const prodData = state.items[productInCartIndex];
+    state.items.splice(productInCartIndex, 1);
+    state.qty -= prodData.qty;
+    state.total -= prodData.price * prodData.qty;
+  },
+};

2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/products/index.js

@@ -1,6 +1,4 @@
-//import counterActions from './actions.js';
 import productGetters from './getters.js';
-//import counterMutations from './mutations.js';
 
 export default {
   namespaced: true,