您的位置:首页 > 编程学习 > > 正文

vue编程加入购物车(vuex实现简单的购物车功能)

更多 时间:2021-10-10 00:35:18 类别:编程学习 浏览量:929

vue编程加入购物车

vuex实现简单的购物车功能

本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下

文件目录如下:

vue编程加入购物车(vuex实现简单的购物车功能)

购物车组件

  • <template>
        <li>
            <h1>vuex-shopCart</h1>
            <li class="shop-listbox">
                <shop-list />
            </li>
            <h2>已选商品</h2>
            <li class="shop-cartbox">
                <shop-cart />
            </li>
        </li>
    </template>
    
    <script>
    import shoList from './shop-list'
    import shopCart from './shop-cart'
    
    export default {
      name: 'shop',
      components: {
          'shop-list' : shoList,
          'shop-cart' : shopCart
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    </style>
    
  • 商品列表

  • <template>
        <li 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" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="addToCart(item)">加入购物车</button>
                    </td>
                </tr>
            </table>
        </li>
    </template>
    
    <script>
    import {mapGetters,mapActions} from "vuex";
    export default {
        name : 'shopList',
        computed: {
            ...mapGetters({
                    shopList:'getShopList',
                })
        },
        methods: {
            ...mapActions(['addToCart'])
        },
    }
    </script>
    
  • 选中商品列表

  • <template>
        <li 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" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.num}}</td>
                    <td><button class="shop-dele dele-btn" @click="deleteShop(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>
        </li>
    </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',
                deleteShop:"deletToShop"
            })
        }
    }
    </script>
    
  • vuex 创建

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

    store.js

  • 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中引入;

    cart.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 => {
            // map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值
            return state.add.map(({ id, num }) => {
                let product = state.shop_list.find(n => n.id == id)// find()方法返回通过测试(函数内判断)的数组的第一个元素的值,如果没有符合条件的元素返回undefined
                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
    }
    
  • vue编程加入购物车(vuex实现简单的购物车功能)

    vue编程加入购物车(vuex实现简单的购物车功能)

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:vuex 购物车