vuex实现购物车的增加减少移除

深碍√TFBOYSˉ_ 2022-01-11 03:35 346阅读 0赞

1.store.js（公共的仓库）

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        state: {
            carList: [] //购物车的商品
        },
        mutations: {
            // 加
            addCar(state, params) {
                let CarCon = state.carList;
                // 判断如果购物车是否有这个商品，有就只增加数量，否则就添加一个
                // some 只要有一个isHas为true,就为true
                let isHas = CarCon.some((item) => {
                    if (params.id == item.id) {
                        item.num++;
                        return true;
                    } else {
                        return false;
                    }
                })
    
                if (!isHas) {
                    let obj = {
                        "id": params.id,
                        "title": params.title,
                        "price": params.price,
                        "num": 1,
                    }
                    this.state.carList.push(obj)
                }
            },
            // 减
            reducedCar(state,params){
                let len=state.carList.length;
                for(var i=0;i<len;i++){
                    if(state.carList[i].id==params.id){
                        state.carList[i].num--
                        if(state.carList[i].num==0){
                            state.carList.splice(i,1);
                            break;
                        }
                    }
                }
            },
            //移出
            deleteCar(state,params){
                let len=state.carList.length;
                for(var i=0;i<len;i++){
                    if(state.carList[i].id==params.id){
                        state.carList.splice(i,1);
                        break;
                    }
                }
            },
    
             // 初始化购物车，有可能用户一登录直接进入购物车
            // initCar(state, car) {
            //     state.carList = car
            // },
    
        },
        actions: {
            // 加
            addCar({ commit }, params) {
                // console.log(params) //点击添加传过来的参数
                // 使用setTimeout模拟异步获取购物车的数据
                setTimeout(function () {
                    let result = 'ok'
                    if (result == 'ok') {
                        // 提交给mutations
                        commit("addCar", params)
                    }
                }, 100)
            },
            // 减
            reducedCar({ commit }, params) {
                // console.log(params) //点击添加传过来的参数
                // 使用setTimeout模拟异步获取购物车的数据
                setTimeout(function () {
                    let result = 'ok'
                    if (result == 'ok') {
                        // 提交给mutations
                        commit("reducedCar", params)
                    }
                }, 100)
            },
            // 移出
            deleteCar({ commit }, params) {
                // console.log(params) //点击添加传过来的参数
                // 使用setTimeout模拟异步获取购物车的数据
                setTimeout(function () {
                    let result = 'ok'
                    if (result == 'ok') {
                        // 提交给mutations
                        commit("deleteCar", params)
                    }
                }, 100)
            }
            // initCar({ commit }) {
            //     setTimeout(function () {
            //         let result = 'ok'
            //         if (result == 'ok') {
            //             // 提交给mutations
            //             commit("initCar", [{
            //                 "id": 20193698,
            //                 "title": '我是购物车原来的',
            //                 "price": 30,
            //                 "num": 100,
            //             }])
            //         }
            //     }, 100)
            // }
        },
        getters: {
            //返回购物车的总价
            totalPrice(state) {
                let Carlen = state.carList;
                let money = 0;
                if (Carlen.length != 0) {
                    Carlen.forEach((item) => {
                        money += item.price * item.num
                    })
                    return money;
                } else {
                    return 0;
                }
            },
            //返回购物车的总数
            carCount(state) {
                return state.carList.length
            }
        },
    })

2. list.vue(商品列表)

<template>
      
      <div id="listBox">
        
        <router-link :to="{path:'/car'}" style="line-height:50px">跳转到购物车</router-link>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed prop="id" align="center" label="商品id"></el-table-column>
          <el-table-column prop="title" align="center" label="商品标题"></el-table-column>
          <el-table-column prop="price" align="center" label="商品价格"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="addCar(scope.row)" type="text" size="small">加入购物车</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
    export default {
      name: "listBox",
      data() {
        return {
          tableData: [] //商品列表
        };
      },
      methods: {
        // 初始化商品列表
        initTable(){
          this.$gAjax(`../static/shopList.json`)
            .then(res => {
              console.log(res)
              this.tableData=res;
            })["catch"](() => {});
        },
        // 加入购物车
        addCar(row){
          // console.log(row)
          // 提交给store里面actions 由于加入购物车的数据要同步到后台
          this.$store.dispatch('addCar',row)
        }
        
      },
      mounted () {
        this.initTable()
      }
    };
    </script>
    <style>
    #listBox {
      width: 900px;
      margin: 0 auto;
    }
    </style>

3. car.vue(购物车)

<template>
      
      <div id="carBox">
        
        <h2 style="line-height:50px;font-size:16px;font-weight:bold">合计：总共{
       {count}}个商品，总价{
       {totalPrice}}元</h2>
        <p v-if="count==0">空空如也！·······</p>
        <div v-else>
          <el-table :data="carData" border style="width: 100%">
            <el-table-column fixed prop="id" align="center" label="商品id"></el-table-column>
            <el-table-column prop="title" align="center" label="商品标题"></el-table-column>
            <el-table-column prop="price" align="center" label="商品价格"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="reduceFun(scope.row)" type="text" size="small">-</el-button>
                <span >{
       {scope.row.num}}</span>
                <el-button @click="addCar(scope.row)" type="text" size="small">+</el-button>
    
                <el-button @click="deleteFun(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "carBox",
      data() {
        return {};
      },
      computed: {
        //购物车列表
        carData() {
          return this.$store.state.carList;
        },
        //商品总数
        count() {
          return this.$store.getters.carCount;
        },
        //商品总价
        totalPrice() {
          return this.$store.getters.totalPrice;
        }
      },
      methods: {
        // 增加数量
        addCar(row){
           this.$store.dispatch('addCar',row)
        },
        // 减数量
        reduceFun(row){
           this.$store.dispatch('reducedCar',row)
        },
        // 删除
        deleteFun(row){
            this.$store.dispatch('deleteCar',row)
        }
    
        // 用户首次登录请求购物车的数据
        // initCar(){
        //   this.$store.dispatch('initCar')
        // }
      },
      created () {
        // this.initCar();
      },
      mounted() {}
    };
    </script>
    
    <style>
    #carBox {
      width: 900px;
      margin: 0 auto;
    }
    </style>