今天終于把商品頁和購物車功能弄出來了，在這個開發過程中遇到一些小坑，比如購物車和商品頁是分開兩個組件的，沒有利用到vue的雙向數據綁定的特性，導致在操作加減商品數量時兩個組件的數據沒有同步，后來我就重寫了一遍，好好的利用了vuex的狀態保持，這個東西真的很好用。先秀一段我寫的vuex代碼吧！

1 //狀態管理 2 export default (Vuex) => { 3 return new Vuex.Store({ 4 state: { 5 totalMoney: 0, //已選購商品總價格 6 productArray: [] //已選購商品數組 7 }, 8 mutations: { 9 setTotalMoney(state, num) { //設置商品總價格 10 state.totalMoney = num; 11 }, 12 mathTotalMoney(state) { //計算已選購商品總價格 13 let total = 0; 14 for (let i = 0; i < state.productArray.length; i++) { 15 let item = state.productArray[i]; 16 total += (item.count * item.price); 17 } 18 state.totalMoney = total; 19 }, 20 setProductArray(state, obj) { //商品放入或拿出購物車 21 let index = -1; 22 for (let i = 0; i < state.productArray.length; i++) { 23 var item = state.productArray[i]; 24 if (obj.id == item.id) { 25 index = i; 26 break; 27 } 28 } 29 if (index >= 0) { 30 if (obj.count <= 0) { 31 state.productArray.splice(index, 1); 32 } else { 33 state.productArray[index] = obj; 34 } 35 } else { 36 state.productArray.push(obj); 37 } 38 }, 39 clearProduct(state) { //清空購物車 40 state.productArray = []; 41 } 42 }, 43 getters: { 44 getTotalMoney(state) { //獲取商品總價格 45 return state.totalMoney; 46 }, 47 getProductArray(state) { //獲取已選購商品 48 return state.productArray; 49 }, 50 getProductById: (state, getters) => (id) => { //根據ID獲取已選商品 51 for (let i = 0; i < state.productArray.length; i++) { 52 var item = state.productArray[i]; 53 if (item.id == id) { 54 return item; 55 } 56 } 57 return false; 58 } 59 } 60 }); 61 }

　　不過我總覺得，我這樣的用法有點不太對的。貼個代碼，希望有高手指點下，我這樣使用vuex可取不。

1 import Vue from 'vue'; 2 import App from './App'; 3 import router from './router'; 4 import VueResource from 'vue-resource'; 5 import Vuex from 'vuex'; 6 import vuex_store from './store'; 7 8 Vue.use(VueResource); 9 Vue.use(Vuex); 10 11 new Vue({ 12 el: '#app', 13 router, 14 template: '<App/>', 15 components: { App }, 16 store: vuex_store(Vuex) 17 });

　　上面代碼就是入口文件，我將來 vuex 對象再傳入我自己寫的那個store模塊中。接著繼續說我的商品頁和購物車吧，貼個動圖給大看看效果如何。

　　商品也和購物車功能，暫且就這些了。重點還是在布局上，js上的邏輯都不難。可以上我的github獲取源碼看看咯。

　　源碼地址：https://github.com/codeyoyo/seller-app

轉載于:https://www.cnblogs.com/lzy138/p/7737397.html

總結

以上是生活随笔為你收集整理的vue2.0 练习项目-外卖APP(2)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。