#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-導入產品資料
- 開始建立navbar元件，複製html變成元件template ->
- 渲染元件資料到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
- 加入購物車看看console
#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.必須提供總金額
- 1.購物車品項資訊 需要整合產品資訊
- 雖然點選該品項購物車還沒辦法正確顯示該品項(但已能計算總金額了！)接下來依序完成其他功能
- 先觀察畫面中購物車需要顯示產品什麼資訊？
#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);
},
