基于Vuex实现⼩⽶商城购物车（项⽬）基于Vuex实现⼩⽶商城购物车
效果
话不多说，先看效果。
实现步骤
购物车的前端部分：
1. 从数据库同步购物车数据
2. 根据购物车数据动态⽣成购物车页⾯
3. 添加商品到购物车
4. 删除购物车中的商品
5. 修改购物车商品的数量
6. 是否勾选购物车商品
7. 是否全选购物车商品
8. 计算购物车中商品的总数量
9. 计算购物车中偏移的商品总数量
10. 计算购物车中偏移的商品总价格
11. ⽣成购物车中重置的商品详细信息
1、静态页⾯准备
页⾯使⽤了元件的UI的Icon 图标， ，el-checkbox，el-input-number，el-popover，el-button。所以在main.js需要引⼊元件的UI。
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
页⾯代码如下：
说明：为了⽅便，此处直接放最终的代码。
<template>
<div class="shoppingCart">
<!-- 购物车头部 -->
<div class="cart-header">
<div class="cart-header-content">
<p>
<i class="el-icon-shopping-cart-full" >
</i>
我的购物车
</p>
<span>温馨提⽰：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
</div>
</div>
<!-- 购物车头部END -->
<!-- 购物车主要内容区 -->
<div class="content" v-if="getShoppingCart.length>0">
<ul>
<!-- 购物车表头 -->
<li class="header">
<div class="pro-check">
<el-checkbox v-model="isAllCheck">全选</el-checkbox>
</div>
<div class="pro-img"></div>
<div class="pro-name">商品名称</div>
<div class="pro-price">单价</div>
<div class="pro-num">数量</div>
<div class="pro-total">⼩计</div>
<div class="pro-action">操作</div>
</li>
<!-- 购物车表头END -->
<!-- 购物车列表 -->
<li class="product-list" v-for="(item,index) in getShoppingCart" :key="item.id">
<div class="pro-check">
<el-checkbox :value="item.check" @change="checkChange($event,index)">
</el-checkbox>
</div>
<div class="pro-img">
<router-link :to="{
path: '/goods/details',
query: {productID:item.productID}
}">
<img :src="$target + item.productImg" />
</router-link>
</div>
<div class="pro-name">
<router-link
:to="{ path: '/goods/details', query: {productID:item.productID} }"
>{{item.productName}}</router-link>
</div>
<div class="pro-price">{{item.price}}元</div>
<div class="pro-num">
<el-input-number
size="small"
:
value="item.num"
@change="handleChange($event,index,item.productID)"
:min="1"
:max="item.maxNum"
></el-input-number>
</div>
<div class="pro-total pro-total-in">{{item.price*item.num}}元</div>
<div class="pro-action">
<el-popover placement="right">
<p>确定删除吗？</p>
<div >
<el-button
type="primary"
size="mini"
@click="deleteItem($event,item.id,item.productID)"
>确定</el-button>
</div>
<i class="el-icon-error" slot="reference" ></i> </el-popover>
</div>
</li>
<!-- 购物车列表END -->
</ul>
<div ></div>
<!-- 购物车底部导航条 -->
<div class="cart-bar">
<div class="cart-bar-left">
<span>
<router-link to="/goods">继续购物</router-link>
</span>
<span class="sep">|</span>
<span class="cart-total">
共
<span class="cart-total-num">{{getNum}}</span> 件商品，已选择
<span class="cart-total-num">{{getCheckNum}}</span> 件
</span>
</div>
<div class="cart-bar-right">
<span>
<span class="total-price-title">合计：</span>
<span class="total-price">{{getTotalPrice}}元</span>
</span>
<router-link :to="getCheckNum > 0 ? '/confirmOrder' : ''">
<div :class="getCheckNum > 0 ? 'btn-primary' : 'btn-primary-disabled'">去结算
</div>
</router-link>
</div>
</div>
<!-- 购物车底部导航条END -->
</div>
<!-- 购物车主要内容区END -->
<!-- 购物车为空的时候显⽰的内容 -->
<div v-else class="cart-empty">
<div class="empty">
<h2>您的购物车还是空的！</h2>
<p>快去购物吧！</p>
</div>
</div>
<!-- 购物车为空的时候显⽰的内容END -->
</div>
</template>
2、创建Vuex
/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import shoppingCart from './modules/shoppingCart'
Vue.use(Vuex)
export default new Vuex.Store({
strict: true,
modules: {
shoppingCart
}
})
/store/modules/shoppingCart.js
export default {
state: {
shoppingCart: []
// shoppingCart结构
/
*
shoppingCart = {
id: "", // 购物车id
productID: "", // 商品id
productName: "", // 商品名称
productImg: "", // 商品图⽚
price: "", // 商品价格
num: "", // 商品数量
maxNum: "", // 商品限购数量
check: false // 是否勾选
}
*/
}
}
3、同步购物车状态
思路：
在根组件App.vue监听⽤户登录状态；
如果⽤户已经登录，从数据库获取⽤户的购物车数据，把获取到数据更新到vuex；
⽤户没有登录，把vuex中购物车的状态设置为空。
代码如下：
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
computed: {
...mapGetters(["getUser", "getNum"])
},
methods: {
...mapActions(["setShoppingCart"]),
}
watch: {
// 获取vuex的登录状态
getUser: function(val) {
if (val === "") {
// ⽤户没有登录
this.setShoppingCart([]);
} else {
// ⽤户已经登录，获取该⽤户的购物车信息
this.$axios
.post("/api/user/shoppingCart/getShoppingCart", {
user_id: val.user_id
})
.then(res => {
if (de === "001") {
// 001 为成功, 更新vuex购物车状态
this.setShoppingCart(res.data.shoppingCartData);
} else {
// 提⽰失败信息
}
})
.catch(err => {
ject(err);
});
}
}
}
js购物车结算代码vuex的变异：
setShoppingCart (state, data) {
// 设置购物车状态
state.shoppingCart = data;
},
vuex的动作
setShoppingCart({ commit }, data) {
commit('setShoppingCart', data);
}
4、动态⽣成购物车页⾯
思路：
通过vuex中的ShoppingCart获取购物车的状态；
使⽤v-if判断购物车是否存在商品；
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论