短视频带货源码,获取购物车中所有商品列表并加载显示

简介: 短视频带货源码中,获取购物车中所有商品列表并加载显示的相关代码

短视频带货源码中,获取购物车中所有商品列表并加载显示的相关代码

<template>
  <div >
    <div v-for="(item,index) in goodslist" :key="index">
      <p>{{item.name}}</p>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
        return {
            goodslist:[]
        } 
    },
    created(){
      this.getGoodsList()
    },
    getGoodsList(){
      //获取store中所有商品的id,拼接出一个 用逗号分隔出的  字符串
      var idArr=[]
      this.$store.state.car.forEach(item=>idArr.push(item.id))
 
      //如果购物车没有商品则返回,不请求接口,否则报错
      if(idArr.length<=0){
        return
      }
 
      this.$http.get("/api/goods/getshoplist/"+idArr.join(",")).then(res=>{
        if(res.body.status===0){
          this.goodslist=res.body.list
        }
      })
 
    }
  }

store.js

//每次先从本地中读取购物车数据,放到store中
var car = JSON.parse(localStorage.getItem("car") || "[]")
var store=new Vuex.Store({
  state:{
    car:car
  },
    mutations:{
        addToCar(state,goodInfo){
            var flag=false
            //循环商品,如果存在数量相加
            state.car.some(item=>{
                if(item.id==goodInfo.id){
                    item.count+=parseInt(goodInfo.count)
                    flag=true
                    return true
                }
            })
            //如果循环最终还是false,则把商品数据直接push购物车中
            if(!flag){
               state.car.push(goodInfo)
            }
            //当更新car之后,存储到本地
            localstore.setItem("car",JSON.stringfy(state.car))
        }
    }
})

以上就是关于短视频带货源码中,关于获取购物车中所有商品列表并加载显示的相关代码,更多内容欢迎关注之后的文章

目录
相关文章
|
4月前
|
移动开发 Java 测试技术
HarmonyOS NEXT~鸿蒙系统与mPaaS三方框架集成指南
本文详细介绍了鸿蒙系统(HarmonyOS)与mPaaS框架的集成方法。鸿蒙系统作为华为开发的分布式操作系统,具备分布式架构、微内核设计等特性;mPaaS是蚂蚁金服推出的移动开发平台,提供金融级组件和全生命周期管理能力。文章从环境准备、核心功能集成(如初始化、用户认证、支付功能)、适配问题解决到调试测试及最佳实践,全方位指导开发者高效集成两者。通过遵循指南,可充分利用鸿蒙的特性和mPaaS的金融能力,构建高性能、高安全性的应用,同时避免常见兼容性问题,缩短开发周期。
228 0
|
10月前
|
Java 关系型数据库 数据库连接
使用 Spring Boot 执行数据库操作:全面指南
使用 Spring Boot 执行数据库操作:全面指南
1439 1
|
机器学习/深度学习 自然语言处理 语音技术
语音识别技术的原理与应用
语音识别技术的原理与应用
在一个执行力极差的团队工作是一种怎样的体验?
一个执行力极差的团队能把一个公司活活的拖死,在这种团队中工作是一种怎么的体验呢?相信很多小伙伴会对这种团队的工作氛围感兴趣。正好冰河在假期与一位经历过这种团队的朋友聊天,聊到了这个话题,今天就给小伙伴们总结下在一个执行力差的团队工作是一种怎样的体验!
365 0
|
12天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1252 5
|
1天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
11天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1270 87