vue2.0 練習項目-外賣APP(2)

時間 2019-12-14

標籤 vue2.0 vue 練習項目外賣 app 简体版

原文原文鏈接

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

 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可取不。git

 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 });