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>

import Vue from "vue";import Vuex from 'vuex';import cart from "./modules/cart";Vue.use(Vuex);export default new Vuex.Store({  modules:{    cart  }})

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}