Vue3电商项目实战-购物车模块6【16-登录后-合并购物车、17-登录后-商品列表、18-登录后-加入购物车、19-登录后-删除操作】
迪丽瓦拉
2024-05-30 05:18:45
0次
文章目录
- 16-登录后-合并购物车
- 17-登录后-商品列表
- 18-登录后-加入购物车
- 19-登录后-删除操作
16-登录后-合并购物车
目的：登录后需要把把本地购物车合并，且清空本地购物车。
大致步骤：
- 编写合并购物车的API接口函数
- 编写设置购物车数据的mutations目的是清空购物车
- 编写合并购物车的actions函数，实现合并后清空本地
- 在登录完成后调用合并购物车函数
落地代码：
- 编写合并购物车的API接口函数
src/api/cart.js
/*** 合并本地购物车* @param {Array- 编写设置购物车数据的mutations目的是清空购物车
src/store/module/cart.js
// 设置购物车列表setCartList (state, list) {state.list = list}
- 编写合并购物车的actions函数，实现合并后清空本地
src/store/module/cart.js
// 购物车状态
import { mergeCart } from '@/api/cart'
// 合并本地购物车async mergeLocalCart (ctx) {// 存储token后调用合并API接口函数进行购物合并const cartList = ctx.getters.validList.map(({ skuId, selected, count }) => {return { skuId, selected, count }})await mergeLocalCart(cartList)// 合并成功将本地购物车删除ctx.commit('setCartList', [])},
- 在登录完成（绑定成功，完善信息成功）后调用合并购物车函数
login/components/login-form.vue
// 合并购物车操作store.dispatch('cart/mergeLocalCart').then(() => {// 2. 提示Message({ type: 'success', text: '登录成功' })// 3. 跳转router.push(route.query.redirectUrl || '/')})
login/components/login-bind.vue
// 合并购物车操作store.dispatch('cart/mergeLocalCart').then(() => {// 2. 提示Message({ type: 'success', text: '绑定成功' })// 3. 跳转router.push(store.state.user.redirectUrl || '/')})
login/components/login-path.vue
// 合并购物车操作store.dispatch('cart/mergeLocalCart').then(() => {// 2. 提示Message({ type: 'success', text: '完善信息成功' })// 3. 跳转router.push(store.state.user.redirectUrl || '/')})
login/callback.vue
store.dispatch('cart/mergeLocalCart').then(() => {// 2. 跳转到来源页或者首页router.push(store.state.user.redirectUrl)// 3. 成功提示Message({ type: 'success', text: 'QQ登录成功' })})
17-登录后-商品列表
目标：实现登陆后获取购物车商品列表。
大致步骤：
- 编写获取商品列表的API接口函数
- 在actions原有预留TODO位置获取列表
- 退出登录需要清空购物车
落地代码：
- 编写获取商品列表的API接口函数
src/api/cart.js
/*** 获取登录后的购物车列表* @returns Promise*/
export const findCartList = () => {return request('/member/cart', 'get')
}
- 在actions原有预留TODO位置获取列表
src/store/module/cart.js
// 获取购物车列表findCartList (ctx) {return new Promise((resolve, reject) => {if (ctx.rootState.user.profile.token) {
+ // 登录 TODO
+ findCartList().then(data => {
+ ctx.commit('setCartList', data.result)
+ resolve()
+ })}
- 退出登录需要清空购物车
src/components/app-navbar.vue
// 退出登录// 1. 清空本地存储信息和vuex的用户信息// 2. 跳转登录const router = useRouter()const logout = () => {store.commit('user/setUser', {})// 清空购物车
+ store.commit('cart/setCartList', [])router.push('/login')}
18-登录后-加入购物车
目标：实现登陆后加入购物车。
大致步骤：
- 编写加入购物车的API接口函数
- 在actions原有预留TODO位置加入购物车
落地代码：
- 编写加入购物车的API接口函数
src/api/cart.js
/*** 加入购物车* @param {String} skuId - 商品SKUID* @param {Integer} count - 商品数量* @returns Promise*/
export const insertCart = ({ skuId, count }) => {return request('/member/cart', 'post', { skuId, count })
}
- 在actions原有预留TODO位置加入购物车
src/store/module/cart.js
// 加入购物车insertCart (ctx, goods) {// ctx.state 当前模块状态 ctx.rootState 根状态对象return new Promise((resolve, reject) => {if (ctx.rootState.user.profile.token) {
+ // 登录 TODO
+ insertCart(goods).then(() => {
+ return findCartList()
+ }).then((data) => {
+ ctx.commit('setCartList', data.result)
+ resolve()
+ })}
19-登录后-删除操作
目标：实现登陆后删除购物车商品操作（批量删除，清空无效）
大致步骤：
- 编写删除购物车商品的API接口函数
- 在actions原有预留TODO位置删除购物车商品
落地代码：
- 编写删除购物车商品的API接口函数
src/api/cart.js
/*** 删除商品（支持批量删除）* @param {Array} ids - skuId集合* @returns Promise*/
export const deleteCart = (ids) => {return request('/member/cart', 'delete', {ids})
}
- 在actions原有预留TODO位置删除购物车商品
src/store/module/cart.js
// 删除购物车商品deleteCart (ctx, skuId) {return new Promise((resolve, reject) => {if (ctx.rootState.user.profile.token) {
+ // 登录 TODO
+ deleteCart([skuId]).then(() => {
+ return findCartList()
+ }).then((data) => {
+ ctx.commit('setCartList', data.result)
+ resolve()
+ })}
相关内容
热门资讯
Linux-scheduler...
四、调度域 SDTL结构 linux内核使用SDTL结构体来组织CPU的层次关系 struct sc...
Retinanet网络与foc...
参考代码：https://github.com/yhenon/pytorch-reti...