wordpress_blog

This is a dynamic to static website.

聯絡我

Vue3 複習10

gee.hsu

從頭開始 – Pinia 製作一個購物車 2023 新增章節

Pinia 相關資源

// 課程 Pinia CDN 範例
<!-- VueDemi，使用 Pinia 必要的相依套件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-demi/0.13.11/index.iife.js"></script>
<script>const I = VueDemi; const vueDemi = VueDemi;</script>

<!-- Pinia 網頁版，實戰中還是以 npm 為主，這是比較少見的使用方式 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pinia/2.0.22/pinia.iife.js"></script>

01. pinia 簡介

元件資料獨立與傳遞

頁面元件結構

Pinia 好處

  • 跨元件的狀態、方法管理
  • 易於學習，許多觀念與 Vue.js 連貫
  • 相對於其他狀態管理工具更容易上手

02. 專案簡介

  • 完成版型製作
  • 將產品資料渲染至畫面上
  • 最終範例

03. 版型製作

  • 新增 layout.html 檔案
  • 開啟 Bootstrap 5 文件
    Components > Navbar > Text
    選擇單純的結構複製程式碼
  • 修改 layout.html 檔案
    品牌名稱、按鈕
    Components > Buttons
    選擇單純的結構複製程式碼
  • 在購物車的地方加上數字
    Components > Badge > Pill Badges，選擇 danger 的顏色
    修改 Badge 的 class
  • 完成購物車版型
    Form > Select
    Utilities > Vertical align
  • 製作產品卡片結構
    Components > Card
// pinia/layout.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>完整版型製作</title>
    <!-- Bootstarp 5 CSS CDN -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    />
    <style>
      .table-image {
        height: 100px;
        width: 100px;
        object-fit: cover;
      }

      .card-img-top {
        height: 200px;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="container py-5">
        <h2>完成版型製作</h2>
        <nav class="navbar bg-body-tertiary">
          <div class="container-fluid">
            <span class="navbar-brand mb-0 h1">香香餅乾店</span>
            <button type="button" class="btn">購物車
              <span class="badge rounded-pill bg-danger text-white">0</span>
            </button>
          </div>
        </nav>

        <div class="bg-light my-4 p-4">
          <div>購物車沒有任何品項</div> <!-- v-if -->
          <!-- v-else -->
          <table class="table align-middle">
          <tbody>
            <tr>
              <td>
                <a href="#" class="text-dark">x</a>
              </td>
              <td>
                <img src="https://images.unsplash.com/photo-1597733153203-a54d0fbc47de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1090&q=80" class="table-image" alt="">
              </td>
              <td>好吃的餅乾</td>
              <td>
                <select name="" id="" class="form-select">
                  <option value="">1</option>
                </select>
              </td>
              <td class="text-end">
                $900
              </td>
            </tr>
          </tbody>
          <tfoot>
            <td colspan="5" class="text-end">總金額 NT$ 900</td>
          </tfoot>
          </table>
        </div>

        <div class="row row-cols-3 my-4">
          <div class="col">
            <div class="card">
              <img src="https://images.unsplash.com/photo-1597733153203-a54d0fbc47de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1090&q=80"
              class="card-img-top" alt="">
              <div class="card-body">
                <h6 class="card-title">好吃的餅乾
                  <span class="float-end">$900</span>
                </h6>
                <a href="#" class="btn btn-outline-primary w-100">加入購物車</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Vue 3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Bootstrap 5 JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script type="module">
      const app = Vue.createApp({
        // 資料 (函式)
        data() {
          return {};
        },
        // 生命週期 (函式)
        created() {
          console.log(this);
        },
        // 方法 (物件)
        methods: {},
      });

      app.mount("#app");
    </script>
  </body>
</html>

04. 轉換vue元件

  • 修改 layout.html 檔案，增加 script 片段
  • 新增 homeworkComponents 資料夾
  • 製作 Navbar 元件，避免出錯可以先直接在目前的專案位置進行撰寫
  • 新增 navbarComponent.js 檔案
  • 修改 navbarComponent.js 檔案
  • 修改 layout.html 檔案，匯入 NavbarComponent
  • 新增 cartComponent.js 檔案
  • 修改 cartComponent.js 檔案
  • 修改 layout.html 檔案，匯入 CartComponent
  • 新增 productsComponent.js 檔案
  • 修改 prodcutsComponent.js 檔案
  • 修改 layout.html 檔案，匯入 ProductComponent
// pinia/layout.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>完整版型製作</title>
    <!-- Bootstarp 5 CSS CDN -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    />
    <style>
      .table-image {
        height: 100px;
        width: 100px;
        object-fit: cover;
      }

      .card-img-top {
        height: 200px;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="container py-5">
        <h2>完成版型製作</h2>

        <Navbar-Component></Navbar-Component>

        <Cart-Component></Cart-Component>

        <Product-Component></Product-Component>
        
      </div>
    </div>

    <!-- Vue 3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Bootstrap 5 JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script type="module">
      const { createApp } = Vue;

      import NavbarComponent from './homeworkComponents/navbarComponent.js'
      import CartComponent from './homeworkComponents/cartComponent.js'
      import ProductComponent from './homeworkComponents/productsComponent.js'

      const app =createApp({
        components: {
          NavbarComponent,
          CartComponent,
          ProductComponent
        }
      }).mount('#app');

    </script>
  </body>
</html>

// pinia/homeworkComponents/navbarComponent.js

export default {
  template: `<nav class="navbar bg-body-tertiary">
    <div class="container-fluid">
      <span class="navbar-brand mb-0 h1">香香餅乾店</span>
      <button type="button" class="btn">購物車
        <span class="badge rounded-pill bg-danger text-white">0</span>
      </button>
    </div>
  </nav>`
}

// pinia/homeworkComponents/cartComponent.js

export default {
  template: `<div class="bg-light my-4 p-4">
    <div>購物車沒有任何品項</div> <!-- v-if -->
    <!-- v-else -->
    <table class="table align-middle">
    <tbody>
      <tr>
        <td>
          <a href="#" class="text-dark">x</a>
        </td>
        <td>
          <img src="https://images.unsplash.com/photo-1597733153203-a54d0fbc47de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1090&q=80" class="table-image" alt="">
        </td>
        <td>好吃的餅乾</td>
        <td>
          <select name="" id="" class="form-select">
            <option value="">1</option>
          </select>
        </td>
        <td class="text-end">
          $900
        </td>
      </tr>
    </tbody>
    <tfoot>
      <td colspan="5" class="text-end">總金額 NT$ 900</td>
    </tfoot>
    </table>
  </div>`
}

// pinia/homeworkComponents/productsComponent.js

export default {
  template: `<div class="row row-cols-3 my-4">
    <div class="col">
      <div class="card">
        <img src="https://images.unsplash.com/photo-1597733153203-a54d0fbc47de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1090&q=80"
        class="card-img-top" alt="">
        <div class="card-body">
          <h6 class="card-title">好吃的餅乾
            <span class="float-end">$900</span>
          </h6>
          <a href="#" class="btn btn-outline-primary w-100">加入購物車</a>
        </div>
      </div>
    </div>
  </div>`
}

05. 導入產品資料

  • 從範例程式碼 productComponet.js 檔案複製產品資料
  • 修改 productsComponent.js 檔案
// pinia/homeworkComponents/productsComponent.js

export default {
  data() {
    return {
      products: [
        {
          id: 1,
          title: '多色餅乾',
          imageUrl: 'https://images.unsplash.com/photo-1576717585968-8ea8166b89b8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
          price: 80
        },
        {
          id: 2,
          title: '綠色馬卡龍',
          imageUrl: 'https://images.unsplash.com/photo-1623066463831-3f7f6762734d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1135&q=80',
          price: 120
        },
        {
          id: 3,
          title: '甜蜜左擁右抱',
          imageUrl: 'https://images.unsplash.com/photo-1558312657-b2dead03d494?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
          price: 200,
        },
        {
          id: 4,
          title: '巧克力心連心',
          imageUrl: 'https://images.unsplash.com/photo-1606913084603-3e7702b01627?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
          price: 160
        },
        {
          id: 5,
          title: '粉係馬卡龍',
          imageUrl: 'https://images.unsplash.com/photo-1612201142855-7873bc1661b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
          price: 120
        }
      ]
    }
  },
  template: `<div class="row row-cols-3 my-4 g-4">
    <div class="col" v-for="product in products" :key="product.id">
      <div class="card">
        <img :src="product.imageUrl"
        class="card-img-top" alt="">
        <div class="card-body">
          <h6 class="card-title">{{ product.title }}
            <span class="float-end">$ {{ product.price }}</span>
          </h6>
          <a href="#" class="btn btn-outline-primary w-100">加入購物車</a>
        </div>
      </div>
    </div>
  </div>`
}

06. 建立 store

  • 修改 layout.html 檔案，複製範例片段程式碼、載入套件程式碼，實戰中比較少用這種方式
  • 使用 log 查詢 Pinia 是否有正確匯入
  • 在 pinia 資料夾裡面建立 store 資料夾
  • 在 store 資料夾裡面建立 productsStore.js 檔案
  • 會使用到的 layout.html、productsComponent.js、productsStore.js 檔案
  • 修改 layout.html 檔案，匯入 productStore
  • 修改 productsStore.js 檔案
  • 修改 productsComponent.js 檔案
// pinia/layout.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>完整版型製作</title>
    <!-- Bootstarp 5 CSS CDN -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    />
    <style>
      .table-image {
        height: 100px;
        width: 100px;
        object-fit: cover;
      }

      .card-img-top {
        height: 200px;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="container py-5">
        <h2>完成版型製作</h2>

        <Navbar-Component></Navbar-Component>

        <Cart-Component></Cart-Component>

        <Product-Component></Product-Component>
        
      </div>
    </div>

    <!-- Vue 3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Bootstrap 5 JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- VueDemi，使用 Pinia 必要的相依套件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-demi/0.13.11/index.iife.js"></script>
    <script>const I = VueDemi; const vueDemi = VueDemi;</script>
    <!-- Pinia 網頁版，實戰中還是以 npm 為主，這是比較少見的使用方式 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pinia/2.0.22/pinia.iife.js"></script>
    <script type="module">
      const { createApp } = Vue;
      const { createPinia } = Pinia;

      import NavbarComponent from './homeworkComponents/navbarComponent.js'
      import CartComponent from './homeworkComponents/cartComponent.js'
      import ProductComponent from './homeworkComponents/productsComponent.js'

      const app =createApp({
        components: {
          NavbarComponent,
          CartComponent,
          ProductComponent
        }
      })

      const pinia = createPinia()
      app.use(pinia)      
      app.mount('#app')

    </script>
  </body>
</html>

// pinia/store/productsStore.js
const { defineStore } = Pinia;

export default defineStore('productsStore', {
  // data, methods, computed
  // state, action, getters
  state: () => ({
    products: [
      {
        id: 1,
        title: '多色餅乾',
        imageUrl: 'https://images.unsplash.com/photo-1576717585968-8ea8166b89b8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 80
      },
      {
        id: 2,
        title: '綠色馬卡龍',
        imageUrl: 'https://images.unsplash.com/photo-1623066463831-3f7f6762734d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1135&q=80',
        price: 120
      },
      {
        id: 3,
        title: '甜蜜左擁右抱',
        imageUrl: 'https://images.unsplash.com/photo-1558312657-b2dead03d494?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 200,
      },
      {
        id: 4,
        title: '巧克力心連心',
        imageUrl: 'https://images.unsplash.com/photo-1606913084603-3e7702b01627?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 160
      },
      {
        id: 5,
        title: '粉係馬卡龍',
        imageUrl: 'https://images.unsplash.com/photo-1612201142855-7873bc1661b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 120
      }
    ]
  }),
  getters: {
    sortProducts: ({ products }) => {
      return products 
    }
  }
})

// pinia/homeworkComponents/productsComponent.js
import productsStore from "../store/productsStore.js"
const { mapState } = Pinia

export default {
  data() {
    return {
      
    }
  },
  template: `<div class="row row-cols-3 my-4 g-4">
    <div class="col" v-for="product in sortProducts" :key="product.id">
      <div class="card">
        <img :src="product.imageUrl"
        class="card-img-top" alt="">
        <div class="card-body">
          <h6 class="card-title">{{ product.title }}
            <span class="float-end">$ {{ product.price }}</span>
          </h6>
          <a href="#" class="btn btn-outline-primary w-100">加入購物車</a>
        </div>
      </div>
    </div>
  </div>`,
  computed: {
    ...mapState(productsStore, ['sortProducts'])
  }
}

07. 建立購物車 Store

  • 修改 productsStore.js 檔案
  • 加入購物車的行為
    在 store 資料夾裡面建立 cartStore.js 檔案，專門管理購物車所有方法
  • 修改 cartStore.js 檔案
  • 修改 productsComponent 檔案，匯入 cartStore
  • 修改 cartStore.js 檔案
// pinia/store/productsStore.js
const { defineStore } = Pinia;

export default defineStore('productsStore', {
  // data, methods, computed
  // state, action, getters
  state: () => ({
    products: [
      {
        id: 1,
        title: '多色餅乾',
        imageUrl: 'https://images.unsplash.com/photo-1576717585968-8ea8166b89b8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 80
      },
      {
        id: 2,
        title: '綠色馬卡龍',
        imageUrl: 'https://images.unsplash.com/photo-1623066463831-3f7f6762734d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1135&q=80',
        price: 120
      },
      {
        id: 3,
        title: '甜蜜左擁右抱',
        imageUrl: 'https://images.unsplash.com/photo-1558312657-b2dead03d494?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 200,
      },
      {
        id: 4,
        title: '巧克力心連心',
        imageUrl: 'https://images.unsplash.com/photo-1606913084603-3e7702b01627?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 160
      },
      {
        id: 5,
        title: '粉係馬卡龍',
        imageUrl: 'https://images.unsplash.com/photo-1612201142855-7873bc1661b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 120
      }
    ]
  }),
  getters: {
    sortProducts: ({ products }) => {
      return products.sort((a, b) => a.price - b.price)
    }
  }
})

// pinia/store/cartStore.js
const { defineStore } = Pinia;

export default defineStore('cart', {
  // methods
  // actions
  state: () => ({
    cart: []
  }),
  actions: {
    addToCart(productId, qty = 1) {
      console.log(productId, qty);
      this.cart.push({
        id: new Date().getTime(),
        productId,
        qty
      })
      console.log(this.cart);
    }
  }
})

// pinia/homeworkComponents/productsComponent.js
import productsStore from "../store/productsStore.js"
import cartStore from '../store/cartStore.js'
const { mapState, mapActions } = Pinia

export default {
  data() {
    return {
      
    }
  },
  template: `<div class="row row-cols-3 my-4 g-4">
    <div class="col" v-for="product in sortProducts" :key="product.id">
      <div class="card">
        <img :src="product.imageUrl"
        class="card-img-top" alt="">
        <div class="card-body">
          <h6 class="card-title">{{ product.title }}
            <span class="float-end">$ {{ product.price }}</span>
          </h6>
          <a href="#" class="btn btn-outline-primary w-100" @click.prevent="addToCart(product.id)">加入購物車</a>
        </div>
      </div>
    </div>
  </div>`,
  computed: {
    ...mapState(productsStore, ['sortProducts'])
  },
  methods: {
    ...mapActions(cartStore, ['addToCart'])
  },
}

08. 購物車資訊 Store

  • 使用簡報解釋頁面元件結構
  • 修改 cartStore.js 檔案
  • 修改 cartComponent.js 檔案，匯入 cartStore、使用 mapState
  • 修改 cartStore.js 檔案，調整 cartList
// pinia/store/cartStore.js
const { defineStore } = Pinia;
import productsStore from './productsStore.js';

export default defineStore('cart', {
  // methods
  // actions
  state: () => ({
    cart: []
  }),
  actions: {
    addToCart(productId, qty = 1) {
      console.log(productId, qty);
      this.cart.push({
        id: new Date().getTime(),
        productId,
        qty
      })
      // console.log(this.cart);
    }
  },
  getters: {
    cartList: ({ cart }) => {
      // 1. 購物車的品項資訊，需要整合產品資訊
      // 2. 必須計算小計的金額
      // 3. 必須提供總金額
      const { products } = productsStore();
      // console.log(products);
      // console.log(cart);
      const carts = cart.map((item) => {
        // console.log(item);
        // 單一產品取出
        const product = products.find((product) => product.id === item.productId);
        // console.log('相同 id 的產品', product);
        return {
          ...item,
          product,
          subtotal: product.price * item.qty
        }
      })
      // console.log(carts);
      const total = carts.reduce((a, b) => a + b.subtotal ,0);
      // console.log(total);

      return {
        carts, // 列表
        total
      }
    }
  }
})

// pinia/homeworkComponents/cartComponent.js
import cartStore from '../store/cartStore.js'
const { mapState } = Pinia;

export default {
  template: `<div class="bg-light my-4 p-4">
    <div>購物車沒有任何品項</div> <!-- v-if -->
    <!-- v-else -->
    <table class="table align-middle">
    <tbody>
      <tr v-for="item in cartList.carts">
        <td>
          <a href="#" class="text-dark">x</a>
        </td>
        <td>
          <img src="https://images.unsplash.com/photo-1597733153203-a54d0fbc47de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1090&q=80" class="table-image" alt="">
        </td>
        <td>好吃的餅乾</td>
        <td>
          <select name="" id="" class="form-select">
            <option value="">1</option>
          </select>
        </td>
        <td class="text-end">
          $900
        </td>
      </tr>
    </tbody>
    <tfoot>
      <td colspan="5" class="text-end">總金額 NT$ {{cartList.total}}</td>
    </tfoot>
    </table>
  </div>`,
  computed: {
    ...mapState(cartStore, ['cartList'])
  }
}

09. 呈現購物車列表並刪除品項

  • 修改 cartComponent.js 檔案
  • 修改 cartStore.js 檔案，撰寫刪除的方法
// pinia/homeworkComponents/cartComponent.js
import cartStore from '../store/cartStore.js'
const { mapState, mapActions } = Pinia;

export default {
  template: `<div class="bg-light my-4 p-4">
    <div v-if="!cartList.carts.length">購物車沒有任何品項</div> <!-- v-if -->
    <table v-else class="table align-middle">
    <tbody>
      <tr v-for="item in cartList.carts" :key="item.id">
        <td width="100">
          <a href="#" class="text-dark"
          @click.prevent="removeCartItem(item.id)">x</a>
        </td>
        <td>
          <img :src="item.product.imageUrl" class="table-image" alt="">
        </td>
        <td>{{ item.product.title }}</td>
        <td>
          <select name="" id="" class="form-select">
            <option value="">1</option>
          </select>
        </td>
        <td class="text-end">
          $ {{ item.subtotal }}
        </td>
      </tr>
    </tbody>
    <tfoot>
      <td colspan="5" class="text-end">總金額 NT$ {{cartList.total}}</td>
    </tfoot>
    </table>
  </div>`,
  computed: {
    ...mapState(cartStore, ['cartList'])
  },
  methods: {
    ...mapActions(cartStore, ['removeCartItem'])
  }
}

// pinia/store/cartStore.js
const { defineStore } = Pinia;
import productsStore from './productsStore.js';

export default defineStore('cart', {
  // methods
  // actions
  state: () => ({
    cart: []
  }),
  actions: {
    addToCart(productId, qty = 1) {
      console.log(productId, qty);
      this.cart.push({
        id: new Date().getTime(),
        productId,
        qty
      })
      // console.log(this.cart);
    },
    removeCartItem(id) {
      const index = this.cart.findIndex((item) => item.id === id);
      this.cart.splice(index, 1);
    }
  },
  getters: {
    cartList: ({ cart }) => {
      // 1. 購物車的品項資訊，需要整合產品資訊
      // 2. 必須計算小計的金額
      // 3. 必須提供總金額
      const { products } = productsStore();
      // console.log(products);
      // console.log(cart);
      const carts = cart.map((item) => {
        // console.log(item);
        // 單一產品取出
        const product = products.find((product) => product.id === item.productId);
        // console.log('相同 id 的產品', product);
        return {
          ...item,
          product,
          subtotal: product.price * item.qty
        }
      })
      // console.log(carts);
      const total = carts.reduce((a, b) => a + b.subtotal ,0);
      // console.log(total);

      return {
        carts, // 列表
        total
      }
    }
  }
})

10. 新增品項加總至原品項

  • 修改 cartStore.js 檔案
// pinia/store/cartStore.js
const { defineStore } = Pinia;
import productsStore from './productsStore.js';

export default defineStore('cart', {
  // methods
  // actions
  state: () => ({
    cart: []
  }),
  actions: {
    addToCart(productId, qty = 1) {
      // 取得已經有加入購物車的項目
      // 進行判斷，如果購物車有該項目則 +1，如果沒有則是新增一個購物車項目
      const currentCart = this.cart.find((item) => item.productId === productId)

      if (currentCart) {
        currentCart.qty += qty;
      } else {
        this.cart.push({
          id: new Date().getTime(),
          productId,
          qty
        });
      }
      console.log(this.cart);
      // console.log(this.cart);
    },
    removeCartItem(id) {
      const index = this.cart.findIndex((item) => item.id === id);
      this.cart.splice(index, 1);
    }
  },
  getters: {
    cartList: ({ cart }) => {
      // 1. 購物車的品項資訊，需要整合產品資訊
      // 2. 必須計算小計的金額
      // 3. 必須提供總金額
      const { products } = productsStore();
      // console.log(products);
      // console.log(cart);
      const carts = cart.map((item) => {
        // console.log(item);
        // 單一產品取出
        const product = products.find((product) => product.id === item.productId);
        // console.log('相同 id 的產品', product);
        return {
          ...item,
          product,
          subtotal: product.price * item.qty
        }
      })
      // console.log(carts);
      const total = carts.reduce((a, b) => a + b.subtotal ,0);
      // console.log(total);

      return {
        carts, // 列表
        total
      }
    }
  }
})

11. 設定數量

  • 修改 cartComponent.js 檔案
  • 修改 cartStore.js 檔案
// pinia/homeworkComponent/cartComponent.js
import cartStore from '../store/cartStore.js'
const { mapState, mapActions } = Pinia;

export default {
  template: `<div class="bg-light my-4 p-4">
    <div v-if="!cartList.carts.length">購物車沒有任何品項</div> <!-- v-if -->
    <table v-else class="table align-middle">
    <tbody>
      <tr v-for="item in cartList.carts" :key="item.id">
        <td width="100">
          <a href="#" class="text-dark"
          @click.prevent="removeCartItem(item.id)">x</a>
        </td>
        <td>
          <img :src="item.product.imageUrl" class="table-image" alt="">
        </td>
        <td>{{ item.product.title }}</td>
        <td>
          <select name="" id="" class="form-select" :value="item.qty"
          @change="(evt) => setCartQty(item.id, evt)">
            <option :value="i" v-for="i in 20" :key="i">{{ i }}</option>
          </select>
        </td>
        <td class="text-end">
          $ {{ item.subtotal }}
        </td>
      </tr>
    </tbody>
    <tfoot>
      <td colspan="5" class="text-end">總金額 NT$ {{cartList.total}}</td>
    </tfoot>
    </table>
  </div>`,
  computed: {
    ...mapState(cartStore, ['cartList'])
  },
  methods: {
    ...mapActions(cartStore, ['removeCartItem', 'setCartQty'])
  }
}

// pinia/store/cartStore.js
const { defineStore } = Pinia;
import productsStore from './productsStore.js';

export default defineStore('cart', {
  // methods
  // actions
  state: () => ({
    cart: []
  }),
  actions: {
    addToCart(productId, qty = 1) {
      // 取得已經有加入購物車的項目
      // 進行判斷，如果購物車有該項目則 +1，如果沒有則是新增一個購物車項目
      const currentCart = this.cart.find((item) => item.productId === productId)

      if (currentCart) {
        currentCart.qty += qty;
      } else {
        this.cart.push({
          id: new Date().getTime(),
          productId,
          qty
        });
      }
      console.log(this.cart);
      // console.log(this.cart);
    },
    setCartQty(id, event) {
      // console.log(id, event);
      // console.log(event.target.value, typeof event.target.value);
      const currentCart = this.cart.find((item) => item.id === id);
      // console.log(currentCart);
      currentCart.qty = event.target.value * 1;
    },
    removeCartItem(id) {
      const index = this.cart.findIndex((item) => item.id === id);
      this.cart.splice(index, 1);
    }
  },
  getters: {
    cartList: ({ cart }) => {
      // 1. 購物車的品項資訊，需要整合產品資訊
      // 2. 必須計算小計的金額
      // 3. 必須提供總金額
      const { products } = productsStore();
      // console.log(products);
      // console.log(cart);
      const carts = cart.map((item) => {
        // console.log(item);
        // 單一產品取出
        const product = products.find((product) => product.id === item.productId);
        // console.log('相同 id 的產品', product);
        return {
          ...item,
          product,
          subtotal: product.price * item.qty
        }
      })
      // console.log(carts);
      const total = carts.reduce((a, b) => a + b.subtotal ,0);
      // console.log(total);

      return {
        carts, // 列表
        total
      }
    }
  }
})

12. Navbar 數量呈現

  • 修改 navbarComponent.js 檔案
// pinia/homeworkComponents/navbarComponent.js
const { mapState } = Pinia;
import cartStore from "../store/cartStore.js";

export default {
  template: `<nav class="navbar bg-body-tertiary">
    <div class="container-fluid">
      <span class="navbar-brand mb-0 h1">香香餅乾店</span>
      <button type="button" class="btn">購物車
        <span class="badge rounded-pill bg-danger text-white">{{ cart.length }}</span>
      </button>
    </div>
  </nav>`,
  computed: {
    ...mapState(cartStore, ['cart'])
  }
}