vue2.0 练习项目-外卖APP(2)

　　今天终于把商品页和购物车功能弄出来了，在这个开发过程中遇到一些小坑，比如购物车和商品页是分开两个组件的，没有利用到vue的双向数据绑定的特性，导致在操作加减商品数量时两个组件的数据没有同步，后来我就重写了一遍，好好的利用了vuex的状态保持，这个东西真的很好用。先秀一段我写的vuex代码吧！

//状态管理
export default (Vuex) => {
    return new Vuex.Store({
        state: {
            totalMoney: 0, //已选购商品总价格
            productArray: [] //已选购商品数组
        },
        mutations: {
            setTotalMoney(state, num) { //设置商品总价格
                state.totalMoney = num;
            },
            mathTotalMoney(state) { //计算已选购商品总价格
                let total = 0;
                for (let i = 0; i < state.productArray.length; i++) {
                    let item = state.productArray[i];
                    total += (item.count * item.price);
                }
                state.totalMoney = total;
            },
            setProductArray(state, obj) { //商品放入或拿出购物车
                let index = -1;
                for (let i = 0; i < state.productArray.length; i++) {
                    var item = state.productArray[i];
                    if (obj.id == item.id) {
                        index = i;
                        break;
                    }
                }
                if (index >= 0) {
                    if (obj.count <= 0) {
                        state.productArray.splice(index, 1);
                    } else {
                        state.productArray[index] = obj;
                    }
                } else {
                    state.productArray.push(obj);
                }
            },
            clearProduct(state) { //清空购物车
                state.productArray = [];
            }
        },
        getters: {
            getTotalMoney(state) { //获取商品总价格
                return state.totalMoney;
            },
            getProductArray(state) { //获取已选购商品
                return state.productArray;
            },
            getProductById: (state, getters) => (id) => { //根据ID获取已选商品
                for (let i = 0; i < state.productArray.length; i++) {
                    var item = state.productArray[i];
                    if (item.id == id) {
                        return item;
                    }
                }
                return false;
            }
        }
    });
}

　　不过我总觉得，我这样的用法有点不太对的。贴个代码，希望有高手指点下，我这样使用vuex可取不。

import Vue from 'vue';
import App from './App';
import router from './router';
import VueResource from 'vue-resource';
import Vuex from 'vuex';
import vuex_store from './store';

Vue.use(VueResource);
Vue.use(Vuex);

new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App },
    store: vuex_store(Vuex)
});

　　上面代码就是入口文件，我将来 vuex 对象再传入我自己写的那个store模块中。接着继续说我的商品页和购物车吧，贴个动图给大看看效果如何。

　　商品也和购物车功能，暂且就这些了。重点还是在布局上，js上的逻辑都不难。可以上我的github获取源码看看咯。

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