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數量呈現








你可能感興趣的文章

[ js 筆記 ] 一次搞懂Javascript中的slice()、splice()、split()

[ js 筆記 ] 一次搞懂Javascript中的slice()、splice()、split()

{210410} 命令行上的集特盒

{210410} 命令行上的集特盒

HTML CSS position 屬性

HTML CSS position 屬性






留言討論