vuex——做简单的购物车功能

购物车组件

<template>
    <div>
        <h1>vuex-shopCart</h1>
        <div class="shop-listbox">
            <shop-list/>
        </div>
        <h2>已选商品</h2>
        <div class="shop-cartbox">
            <shop-cart/>
        </div>
    </div>
</template>

<script>

    import shopList from "./shop-list";
    import shopCart from './shop-cart';

    export default{
        name:'shop',
        components:{
            'shop-list':shopList,
            'shop-cart':shopCart
        }

    }
</script>

商品列表

<template>
    <div class="shop-list">
        <table>
            <tr class="shop-listtitle">
                <td>id</td>
                <td>名称</td>
                <td>价格</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in shopList" class="shop-listinfo">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td><button @click="addToCart(item)">加入购物车</button></td>
            </tr>
        </table>
    </div>
</template>

<script>
    import{mapActions} from "vuex";
    export default{
        name:'shopList',
        data(){
            return{

            }
        },
        computed:{
            shopList(){
                return this.$store.getters.getShopList
            }
        },
        methods:{
            ...mapActions(['addToCart'])
        }
    }
</script>
<style lang="less" scoped>
    @import url('../../static/public.less');
</style>

选中商品列表

<template>
    <div class="shop-list">
        <table>
            <tr class="shop-listtitle">
                <td>id</td>
                <td>名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in cartData" class="shop-listinfo">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.num}}</td>
                <td><button class="shop-dele dele-btn" @click="deletShop(item)">删除</button></td>
            </tr>
            <tr v-if="cartData.length<=0">
                <td colspan="5">暂无数据</td>
            </tr>
            <tr>
                <td colspan="2">总数：{{totalNum}}</td>
                <td colspan="2">总价格：{{totalPrice}}</td>
                <td><button class="dele-cart dele-btn" @click="clearCart">清空购物车</button></td>
            </tr>
        </table>
    </div>
</template>

<script>
    import {mapGetters,mapActions} from "vuex";
    export default{
        name:'shopCart',
        data(){
            return{
                
            }
        },
        computed:{
            ...mapGetters({
                cartData:'addShopList',
                totalNum:'totalNum',
                totalPrice:'totalPrice'
            })
        },
        methods:{
            ...mapActions({
                clearCart:'clearToCart',
                deletShop:'deletToShop'
            })
        }
    }
</script>

<style lang="less" scoped>
    @import url('../../static/public.less');
    .dele-btn{
        background-color: red !important;
    }
    .dele-btn:hover{
        background-color: #bd0000 !important;
    }
</style>

vuex 创建

npm install vuex --save,创建vuex文件夹，在文件夹中创建store.js，引入vuex；

import Vue from "vue";
import Vuex from 'vuex';
import cart from "./modules/cart";


Vue.use(Vuex);

export default new Vuex.Store({
    modules:{
        cart
    }
})

建立一个模块文件夹modules，里面创建创建当个store模块，然后默认输出，在store.js中引入；

const state = {
    shop_list: [{
        id: 11,
        name: '鱼香肉丝',
        price: 12,
    }, {
        id: 22,
        name: '宫保鸡丁',
        price: 14
    }, {
        id: 34,
        name: '土豆丝',
        price: 10
    }, {
        id: 47,
        name: '米饭',
        price: 2
    },{
        id: 49,
        name: '蚂蚁上树',
        price: 13
    },
    {
        id: 50,
        name: '腊肉炒蒜薹',
        price: 15
    }],
    add:[]
}

const getters ={
    //获取商品列表
    getShopList:state => state.shop_list,
    //获取购物车列表
    addShopList:state => {
        return state.add.map(({id,num})=>{
            let product = state.shop_list.find(n => n.id == id);
            if(product){
                return{
                    ...product,
                    num
                }
            }
        })
    },
    //获取总数量
    totalNum:(state,getters) =>{
        let total =0;
        getters.addShopList.map(n=>{
            total += n.num;
        })
        return total;
    },
    //计算总价格
    totalPrice:(state,getters)=>{
        let total=0;
        getters.addShopList.map(n=>{
            total += n.num*n.price
        })
        return total;
    },

}

const actions={
    //加入购物车
    addToCart({commit},product){
        commit('addCart',{
            id:product.id
        })
    },
    //清空购物车
    clearToCart({commit}){
        commit('clearCart')
    },
    //删除单个物品
    deletToShop({commit},product){
        commit('deletShop',product)
    }
}

const mutations ={
    //加入购物车
    addCart(state,{id}){
        let record = state.add.find(n => n.id == id);
        if(!record){
            state.add.push({
                id,
                num:1
            })
        }else{
            record.num++;
        }
    },
    //删除单个物品
    deletShop(state,product){
        state.add.forEach((item,i)=>{
            if(item.id == product.id){
                state.add.splice(i,1)
            }
        })

    },
    //清空购物车
    clearCart(state){
        state.add=[];
    }
}

export default{
    state,
    getters,
    actions,
    mutations
}

 

转载于:https://www.cnblogs.com/huangmin1992/p/8717003.html