vuex实现简单购物车加减数量遇到的问题

Posted 2023-03-28

参考技术A 最近在做一个商城的项目，在加入购物车这一块使用了vuex，

当中遇到了一个问题就是在购物车页面时，加减数量 视图不及时更新

但是数据已经改变，只有再次进入购物车页面的时候才会更新视图。

在控制台打印数量时显示undifined。

只需要深拷贝一下加入购物车的数据就好使了

state.list是我加入购物车的数据，新建一个数组arr，将state.list深拷贝赋值给arr，处理完成后再赋值回给state.list就好

在这里为了通俗易懂，就拼音式命名了。

web框架实现购物车数量加减

企业开发中经常是团队协作，每个人分配一个小的模块，比如说购物车模块，数量加减这一块人们首先想到的就是通过jquery实现，其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现，那我用django框架实现了一个简易的效果，把代码贴出来，条条大路通罗马，编程也不应该局限在某一种方式上，

# 购物车数量+1
def add_one(request,id):
    user1 = request.session.get(‘user1‘)
    cart1 = models.Cart.objects.filter(id=id).first()
    cart1.num += 1
    product = models.Product.objects.filter(name=cart1.pro_name).first()
    if cart1.num <= product.num:
        cart1.save()
    else:
        err = ‘库存不足‘
    cart =models.Cart.objects.filter(user_name=user1)
    return redirect(reverse(‘indexapp:my_ca‘))

# 购物车数量-1
def del_one(request,id):
    user1 = request.session.get(‘user1‘)
    cart1 = models.Cart.objects.filter(id=id).first()
    cart1.num -= 1
    product = models.Product.objects.filter(name=cart1.pro_name).first()
    if cart1.num >= 1:
        cart1.save()
    elif cart1.num >= 0:
        err = ‘当前商品只剩一件啦，可通过删除键来移除商品，真的不要了吗？‘
    cart =models.Cart.objects.filter(user_name=user1)
    return redirect(reverse(‘indexapp:my_ca‘))

<a href="{% url ‘indexapp:add_o‘ i.id%}">+</a>{{i.num}}<a href="{% url ‘indexapp:del_o‘ i.id%}">

是不是很简单，实现了数量的加减和库存的判断