效果圖
展示目錄結構
-
-
- product組件（純靜態代碼）
- cart組件（純靜態代碼）
- info組件（純靜態代碼）
-
- 完成以上的三個組件，現在要開始調用這些組件，在App.vue中調用
如果你的姿勢正確的話，會出現這個畫面
解釋這里為什么要分開組件的編寫，vuex是就是存儲的數據的中心的，每個組件都是拿到數據，這樣才能vuex的價值
-
- store/index.js
- modules/cart.js
- 搭建問vuex的我們現在要使用vuex的，在main.js中使用
到這步，vuex的模板基本，但是沒有效果怎么辦，現在開始修改的product.vue中data中的shoplist剪切到cart.js中的state中，
這里解釋一下，state和組件中大data作用是一樣，都是的設置假數據的和變量，查看文檔的state修改cart.js的state
既然state和data的作用是一樣的，那么我們在組件中拿到state中的shop_list的數據呢？
- 這是需要getters的處理哦
組件中怎么拿到這個shoplist數據呢？查看文檔getters 中的mapGetters輔助函數的方法
這個數據是從product組件剪切走的，現在還回去，是這樣秀的
以上 商品列表功能完成
-
- 接下來是添加商品進購物車功能
- 現在編寫addToCart的方法，我們會到cart,js 中的action里面去，查看文檔action的介紹，需要commit來分發actions
- 既然我們分發出來了一個add的方法，我們在mutations中接受,mutation中可以直接拿到state里面所有的數據，因為這里的added是自己定一個已選商品的數組，我組件中點擊時傳遞一個對象過來的，find這個對象，但是這里有2種情況，一個added為空或者有數據，但是不是當前點擊的對象的數據，當為空時，我們人為個這個對象push一個id和num為1的值，有點擊就是當前這個對象的時候，我們執行++的操作，這里打印一下的值，或者從vue-tool的種查看的，vuex的一個瀏覽器的查看，自己百度去安裝，查看數據比較方便
- 這里vuex中action的addToCart方法寫好了，如何product.vue中的addToCart方法對應上去呢？
- 這里文檔中有介紹，有個mapActions的輔助函數，
- 這樣我們就是action和組件中方法關聯起來了,
- 現在增加商品的click事件解決，但是我們要把added給拋出，但是前提要對added這個數組進行數據轉化
- 修改getter中方法，添加一條
這里我們需要將cartProducts這個拋出去，和shoplist的方法一樣的，只不過這個是在cart.vue中操作，
-
-
- 現在我們開始計算總價，總數量 和 清空購物車功能，在getter中操作，
- 計算總價
- 清空購物車
-
- 清空購物車的操作，原理就是added的數組置為空數組就可以的，
-
- 將actions中clearAllCart和info.vue中的組件聯系到一起，前面已經介紹過了。cart.js中的actions
-
- mutations接受
- info.vue中調用clearAllCart方法，
-
- 還有一個小功能就是已選商品中的有個刪除的按鈕，實現這個功能，cart.vue組件中修改
- 將actions中delProduct和car.vue中的組件聯系到一起，前面已經介紹過了。cart.js中的actions
- mutations接受
- car.vue中調用delProduct方法，
-
-