vuex实现的简单购物车功能示例

本文实例讲述了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
}

希望本文所述对大家vue.js程序设计有所帮助。

来源：https://blog.csdn.net/yelin042/article/details/80216821