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程序设计有所帮助。