利用vuex实现购物车案列

一、页面实现的结果：

二、搭建购物车源代码：

1、安装命令执行后再main.js文件夹配置

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

2、主文件引入子文件同于显示在页面上

<template>
  <div class="about">
    <h1>Vuex购物车案列</h1>
    <prouduct></prouduct>
    <prouductCar> </prouductCar>
    <number></number>
  </div>
</template>
<script>

import prouduct from './product/prouduct.vue'
import prouductCar from './product/prouductCar.vue';
import number from './product/number.vue'
export default {
  name: 'About',
  components: {
    prouduct,
    prouductCar,
    number
  },
}
</script>

3、子文件夹使用element表格组件

<template>
    <div class="box">
      <div>购物车</div>
      <el-table
      :data="showCar"//数据表名称
      style="width: 60%;margin:0 auto"//样式设置
      :row-class-name="tableRowClassName"
      empty-text="您的购物车空空如也~~~">
      <el-table-column
        prop="id"
        label="Id">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="number"
        label="价格">
      </el-table-column>
      <el-table-column
        prop="num"
        label="数量">
        <template v-slot="scope">
          <el-input-number v-model="scope.row.num" :min="1" label="描述文字"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template v-slot="scope">
          <el-button @click="delRow(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
  </template>

4、商品信息展示在页面上

/****商品文件的《script》标签
      computed:{
        // 方法1
        tableData:function(){
          return this.$store.getters.shoplist
        }
        // 方法2
        // ...mapGetters(['tableData'])
      }
/***store文件，在getters方法用于视图显示，在此方法中返回数据到页面
onst getters={
    // 对视图返回的数据--对视图提供的获取数据的方法
    // 页面商品数据方法1
    // shopList: function(state){
        // let new Arry=state.tableData.map(item=>{
        // item.number+=10
        // return item
        // })
    //     return state.Arry
    // }
    // 方法2
    shoplist:state=>state.tableData,
    shopCar:state=>state.showCar,
    price:function(state,getters){//总价格
        let price=0
        getters.shopCar.forEach((item)=>{
            price+=item.number*item.num
        })
        return price
    },
    number:function(state,getters){//总数
        let number=0
        getters.shopCar.forEach((item)=>{
            number+=item.num
        })
        return number
    }

5、添加购物车和数据展示

/1***商品组件的添加按钮 
 <el-button @click="addRow(scope.row)" type="text" size="small">添加购物车</el-button>
 /2***把带有参数的函数传到store文件
 ...mapActions(['addRow'])
// 3、actions方法
// 添加购物车
    addRow(ctx, prouduct){
        ctx.commit('addRow',prouduct);
    },
//3、mutations方法
// 添加购物车：购物车数据中添加一条数据 state.购物车数据.push
    // 点击按钮添加到购物车
    addRow(state,prouduct){
        // 数量叠加 方法1
        // let record=state.showCar.find(item=>{
        //     if(item.id==prouduct.id){
        //         return item
        //     }
        //     return item.id==prouduct.id
        // })
        // console.log(record);
        // 方法2
        let record=state.showCar.find(item=>item.id==prouduct.id)
        // 判断购物车是否有值，如果没有就 push到页面，有就数量加加
        if(record){
            record.num++
        }else{
            let obj={
                ...prouduct,
                num:1
            }
            state.showCar.push(obj)
        }
    },

6、购物车页面删除本条数据数量减减

/1****购物车页面 
  methods:{
        // 删除本条数据
        handleDelete(row){
            this.$store.dispatch('deleteProuductCar',row)
        }
    },
/****store文件
//1、actions方法
// 删除数据购物车本条数据
    deleteProuductCar({commit},data){
      commit('deleteProuductCar',data)
    }
//2、mutations方法
// 删除数据购物车本条数据
    deleteProuductCar(state,data){
      state.prouductCar.forEach(element => {
        if(element.id==data.id){
          data.count--;
          if(data.count<=0){
            state.prouductCar.splice(state.prouductCar.indexOf(data),1)
          }
        }
      });
    }

7、清空购物车

/******清空购物车和统计数量的页面number.vue
// 清空购物车
    methods:{
        ...mapActions(['allDel'])
    },
/****store页面
1、actions方法
 // 清空购物车 
    allDel({commit}){
      commit('allDel')
    }
2、mutations方法
// 清空购物车
    allDel(state){
      state.prouductCar=[]
    }

8、计数和统计总金额

/*****清空购物车和统计数量的页面number.vue
// 统计总数和总价格
    computed:{
        ...mapGetters(['number','TotalAmount'])
    }
/****store页面
//getters方法
  getters: {
    // 总数
    number:function(state){
      console.log(state);
      let number=0
      state.prouductCar.forEach((item)=>{
        number+=item.count
      })
      return number
    },
    // 总价
    TotalAmount:function(state){
      let totalAmount=0
      state.prouductCar.forEach((item)=>{
        totalAmount+=item.p_img*item.count
      })
      return totalAmount
    }
  },

9、引用element样式的数量加减

//需要加上当前行信息：slot-scope="scope"
<template slot-scope="scope">
    <el-input-number v-model="scope.row.count" :min="1" :max="scope.row.p_num"></el-input-number>
</template>