fix TheHeader

2021-05-05_vuex-11-a-challenge-starting-code/src/components/nav/TheHeader.vue

@@ -10,7 +10,7 @@
         </li>
         <li>
           <router-link to="/cart">Cart</router-link>
-          <base-badge mode="elegant">{{ cart.qty }}</base-badge>
+          <base-badge mode="elegant">{{ quantity }}</base-badge>
         </li>
         <li v-if="isLoggedIn">
           <router-link to="/admin">Admin</router-link>
@@ -25,8 +25,12 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 export default {
-  inject: ['isLoggedIn', 'login', 'logout', 'cart'],
+  inject: ['isLoggedIn', 'login', 'logout'],
+  computed: {
+    ...mapGetters('cart', ['quantity'])
+  }
 };
 </script>
 
@@ -82,4 +86,4 @@ button:hover,
 button:active {
   background-color: #f0d5ff;
 }
-</style>
+</style>

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

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