Chương 4-Bài 8. Tạo component CartSummary

Step 1: tạo component CartSummary

• Tạo file project-nentang/src/components/CartSummary.vue
• Nội dung file như sau:

<template>
  <div>
    <router-link class="btn btn-success" to="/kiem-tra-gio-hang">
      <font-awesome-icon :icon="['fas', 'shopping-cart']" />&nbsp;Giỏ hàng ({{ getProductsInCartCount }} sp)
    </router-link>
  </div>
</template>

<script>
// Import helper mapGetters của Vuex để có thể sử dụng getters `getAllProducts` đã khai báo bên KHO chứa (store)
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['getProductsInCart']),
    getProductsInCartCount () {
      return this.getProductsInCart.length
    }
  }
}
</script>

<style></style>

Step 2: bổ sung component CartSummary vào thanh NavBar

• Hiệu chỉnh file project-nentang/src/components/NavBar.vue
• Nội dung file như sau:

<template>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <div class="container">
      <router-link to="/" class="navbar-brand">NetaShop</router-link>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li>
            <router-link to="/" class="nav-link" exact-active-class="text-success" active-class="active">
              <font-awesome-icon :icon="['fas', 'home']" />&nbsp;Trang chủ
            </router-link>
          </li>
          <li>
            <router-link to="/gioi-thieu" class="nav-link" exact-active-class="text-success" active-class="active">
              <font-awesome-icon :icon="['fab', 'twitter']" />&nbsp;Giới thiệu
            </router-link>
          </li>
          <li>
            <router-link to="/lien-he" class="nav-link" exact-active-class="text-success" active-class="active">
              <font-awesome-icon :icon="['fab', 'twitter']" />&nbsp;Liên hệ
            </router-link>
          </li>
        </ul>

        <ul class="navbar-nav ml-auto">
          <li>
            <cartSummary />
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script>
import CartSummary from '@/components/CartSummary'

export default {
  components: {
    CartSummary
  }
}
</script>

<style></style>