vuex模块化练习-购物车

功能展示如图：

当进行商品加减或删除操作时，总价和总数会实时更新。

src文件的结构如下：

一：todolist目录：state.js文件用来存放数据，mutations.js文件用来存放方法，index.js用来暴露方法和数据。

state.js文件：

export default{
    list : [   //商品信息
        {
            name : '苹果手机',
            price : 8000,
            title : '即将开启双卡双待',
            num : 1
        },
        {
            name : '华为手机',
            price : 4500,
            title : '创新三个摄像头',
            num : 2
        },
        {
            name : '小米手机',
            price : 3500,
            title : '打游戏就是快',
            num : 3
        },
        {
            name : '三星手机',
            price : 7000,
            title : '手机中的爆炸机',
            num : 4
        }
    ],
    hprice : 0,  //总价
    hnum : 0   //总数
}

mutations.js文件：

export default{
    add(state, index){  //增加商品数量
        state.list[index].num += 1;
        state.hprice += state.list[index].price;
        state.hnum += 1;
    },
    reduce(state, index){  //减少商品数量
        if(state.list[index].num>0){
            state.list[index].num -= 1;
            state.hprice -= state.list[index].price;
            state.hnum -= 1;
        }
    },
    delet(state, index){  //删除商品
        state.hprice -= state.list[index].price*state.list[index].num;
        state.hnum -= state.list[index].num;
        state.list.splice(index, 1);
    },
    sum(state){  //求总价、总数
        for(var i in state.list){
            state.hprice += state.list[i].price*state.list[i].num;
            state.hnum += state.list[i].num; 
        }
    }
}

todolist中的index.js文件：

import state from './state'
import mutations from './mutations'
export default{   //暴露数据和方法
    state,mutations
}

二：store目录中的index.js用来暴露todolist这个模块

store中的index.js文件：

import Vue from 'vue';
import Vuex,{Store} from 'vuex';
Vue.use(Vuex);
import todolist from "./todolist"
var store = new Store({
     modules:{      //vuex模块化
         todolist
     }
})
export default store;

三：注册App组件

mian.js文件：

import Vue from 'vue'
import App from './App'
import store from './store/index'
Vue.config.productionTip = false
new Vue({
    el: '#app',
    components: {
        App
    },
    store,
    template: '<App/>'
})

四：编写App组件：

App.vue文件：

<template>
<div id="app">
    <table border="1">
        <tr>
            <th>序号</th>
            <th>商品名</th>
            <th>商品简介</th>
            <th>价格</th>
            <th>数量</th>
            <th>总价</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item, index) in todolist.list" :key="index"><!--遍历state中的list数据-->
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.title}}</td>
            <td>{{item.price}}</td>
            <td>
                <button @click="reduce(index)">-</button>
                {{item.num}}
                <button @click="add(index)">+</button>
            </td>
            <td>{{item.price*item.num}}</td>
            <td>
                <button @click="delet(index)">删除</button>
            </td>
        </tr>
        <tr>
            <td>总数：</td>
            <td>{{todolist.hnum}}</td>
            <td>总价：</td>
            <td>{{todolist.hprice}}</td>
        </tr>
    </table>
</div>
</template>
<script>
//引入五个辅助函数，用...对象展开运算符将数据和方法混入
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'; 
export default{
    created(){
        this.sum();  //刷新页面首先执行求和运算
    },
    computed : {
        ...mapState(['todolist'])  //使用对象展开运算符将state混入computed中
    },
    methods : {
        ...mapMutations(['add', 'reduce', 'delet', 'sum'])  //使用对象展开运算符将mutations混入methods中
    }
}
</script>
<style type="text/css">
table{
    width: 600px;
    margin: 0 auto;
    text-align: center;
    background: paleturquoise;
}
</style>

五：模块化的作用，是将组件中共用的数据和方法提取出来，这样组件文件中代码就变得非常简单，逻辑结构非常清楚。