Pinia練習-製作購物車

#1-Pinia簡介

• 筆記為2023 六角vue直播班的作業練習
• 步驟：
  • #2-專案簡介
  • #3-版型製作:bootstrap
  • #4-轉換Vue元件
  • #5-導入產品資料
  • #6-建立store
  • #7-建立購物車
  • #8-購物車資訊
  • #9-呈現購物車列表並刪除品項
  • #10-新增品項加總至原品項
  • #11-設定數量
  • #12-Navbar數量呈現

#3-版型製作:bootstrap

• 這部分已快速練習過了 ->
  
• 把這三個區塊一個一個轉換成vue元件

#4-轉換Vue元件

• 起手式開始 好的開始是成功的一半->
  

• 新增專門存放元件的資料夾 testComponents

  • 開始建立navbar元件，複製html變成元件template ->
    
  • 在app應用程式-區域註冊navbar元件
  • 將navbar元件名寫入在html模板中作為標籤使用
    
  • 畫面中上面區塊是html生成的，下面navbar元件已經是vue生成了
  • 上述如果沒有發生問題，我們就可以運用模塊es module去拆分元件獨立於個別檔案(將上面改寫為以下)
    
  • !!!!更正以上，元件我們以首字大寫方式為主喔！跟vue cli一樣
  • 練習寫其他兩個區塊拆成元件
    

  ## #5-導入產品資料
  

• 渲染元件資料到template
  

#6-建立store(導入Pinia)

• Pinia導入起手式
  
• 第一步-導入{ createPinia }方法會和Vue環境進行綁定！
  • 些微修改程式碼，mount('#app')生成畫面另外由app去接
  • 綁定Pinia和Vue環境：正式啟用createPinia()方法
  • 宣告我們要在vue環境中使用pinia app.use(pinia)
    

• 建立store資料夾(和元件資料夾同層級)這裡就是pinia專門儲存資料與方法的地方
  • 在store資料夾下，創建productsStore.js檔案並匯出
  • 因為pinia 檔案是建立在全域的環境，所以會使用cont直接導入defineStore的方法,我們需要定義一個store所以使用到defineStore的方法
  • export default匯出:會在這直接使用defineStore方法建立store
  • export default defineStore('自定義名稱',‘建立物件和vue元件相似’) 有兩個參數
  • //vue data methods computed
  • //store state, actions, getters
  • //我們在store中建立資料時，會使用state(存放元件資料),在元件中引入這個state時會使用mapState這個方法
  • //透過getters我們可以把資料給其他元件做使用
  • //getters讓我們的元件可以取用store的資料與狀態
    
    

#7-建立購物車store

• 修改一下購物車列表的順序以價格高低為主
  
• 跟＃6步驟很像，現在我們要建立購物車的store
  
• 把pinia的加入購物車的事件or方法引入到元件檔案中
  
  • 加入購物車看看console
    
  • 為購物車產品加入id
    

#8-購物車資訊(筆記版)

• 目前我們已經做到購物車store中有因為點擊加入購物車後而產生的加入購物車的品項資料，因此cartStore.js只有儲存品項資料在cart[]，但還沒有把品項渲染在畫面上(並且該品項資料只有productid 和預設的qty)

• 所以當前的進度，我們會在cartStore做一件事：

  • 設置getters ->購物車列表cartList

    • 但加入購物車功能，該品項目前只有id/產品id/預設qty

    • 所以預計cartList會回傳兩大資訊，

      • carts:[]//產品資訊
      • 總金額

      • 1.（購物車選的品項資訊需要整合產品資訊）->必須匯入productsStore到cartStore ->並在cartStore中的getters中的cartList取出{products} -> 需要在getters的cartList箭頭函式取的cartStore的state中的carts[]資料 -> 比對兩個資料！！ ->利用.map()方法重新組合一個新列表（購物車會不斷更新）->取出單一產品products.find(product.id === item.productid)->得到該產品的詳細資訊 -> return {...item,單一產品資訊,小計(產品數量x金額)}

      • 2.必須計算小計得全部金額

      • 3.必須提供總金額
  • 所以我們必須跟產品全部資料做整合比對資訊．抓出該品項的詳細資訊，在透過cartStore炫染在cart元件上
  • 呈現在購物車畫面資料會有：
    • 產品小計（依據我們產品價格和購買數量相乘之後得到的結果）
    • 最下面還有總金額，就是購買所有品項的加總

• 先做渲染：試著先將cartStore的資料先丟到cart元件上做測試呈現

#8-購物車資訊(整合/難度/實作版)

• 當前，我們已有在cartStore有加入購物車的方法，並綁定在cartComponent.js元件中，但點擊加入購物車按鈕，只會console出該品項的產品id與數量 ->
• 目前需要做的事情就是從productsStore中丟資料給cartStore對比購物車清單的品項資料，拉出來詳細的產品資料，取出購物車列表的必要資料做回傳 ->
• 再將上述的cartStore整合好的購物車列表資料，和cartComponent作綁定，並渲染在畫面上

• 開始！

  • 建議可以先串連cartStore的資料渲染在cartComponent中

  • 先在cartStore中設定getters（因爲要把資料給購物車元件使用），並且在getters中設定cartsList：[]購物車列表的資料，如下：

    getters: {
    cartsList: () => {
        return {
           carts: [], //購物車列表
           total: 100,
        }
    
    }
    }
    

  • 回到cartComponent卡片元件，
    
  • 渲染畫面看到總金額出現100元，代表cartStore在cartComponent的渲染是成功的
  • 雖然購物車還沒有顯示任何品項(待會會做)
• 我們透過productsStore.js提供資料給Products元件並把產品渲染到畫面上 在cartStore有提供加入該品項至購物車的方法也提供給Products元件，但目前productsStore和cartStore兩個資料和狀態都是獨立的，在cartStore有加入購物車該品項的productId資料，我們可以把productsStore的產品列表資料提供給cartStore, 可以透過productId和該產品做比對，找出該產品詳細產品資料訊息做資料整合並return出cartComponent想要的資料內容
  • 先觀察畫面中購物車需要顯示產品什麼資訊？
    • 產品的圖片/title/數量/價格
    • 產品小計：單品價格＊數量
    • 總金額
  • 寫成步驟：
    • 1.購物車品項資訊 需要整合產品資訊
      • 在cartStore中要匯入productsStore使用該檔案下的products產品列表資料
      • 因為我們是在cartStore取用productsStore中的products資料，可以使用解構的方式，但必須以執行該productsStore()做賦予值
        const { ptoducts } = productsStore();
      • 這樣就等於已經可以使用products這資料在元件下
      • 再來也需要傳入cartStore原本有的資料狀態cart: []作為getters中cartsList
      • 我們需要做的事情是當購物車品項cart有更新資料時，要艮產品資料做整合
        
    • 2.必須計算小計的金額
    • 3.必須提供總金額
      
      
  • 雖然點選該品項購物車還沒辦法正確顯示該品項(但已能計算總金額了！)接下來依序完成其他功能

#9-呈現購物車列表並刪除品項

#10-新增品項加總至原品項

export default defineStore("cartStore", {
  state: () => ({
    //建立一個購物車的資料(陣列形式)可以新增品項
    cart: [], //當前的資料狀態
  }),
  actions: {
    //這裡是一般函式所以可以使用this.cart
    addToCart(productId, qty = 1) {
      //取的已經加入購物車的項目
      //進行判斷，
      //如果購物車有該項目+1
      //如果沒有則是新增一則購物車項目
      const currentCart = this.cart.find(
        (item) => item.productId === productId
      );

      if (currentCart) {
          //如果購物車有該項目+1
        currentCart.qty++;
      } else {
        //點擊加入購物車時，將該品項push到cart中
        this.cart.push({
          id: new Date().getTime(),
          productId,
          qty,
        });
      }
      // console.log(productId, qty);
      console.log(this.cart);
    },

#11-設定數量

#12-Navbar數量呈現