Vue项目中模块简介

最新推荐文章于 2024-07-24 08:10:03 发布

鹤忧_

最新推荐文章于 2024-07-24 08:10:03 发布

阅读量494

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wbh_ABC/article/details/127741731

版权

本文介绍了Vue项目中的两个核心模块——购物车和登录注册。购物车模块涉及商品的增删改查、全选功能以及计算总价和数量。全选功能通过getters实现，更新状态通过updatecart提交给服务器。删除和添加商品则涉及到服务器数据的操作。登录注册模块中，登录信息存储在Vuex的state，并通过SET_USERINFO更新，登录成功后使用$router.replace进行页面跳转；注册则是将用户信息提交到数据库。

摘要由CSDN通过智能技术生成

一、购物车模块

这个模块主要是对购物车的增删改good对应每一件商品set_goods主要是为了得到数据页面就是改变物品存放的状态
全选功能在getters中计算当前新的数据当全部商品都被选中时返回true选中全选按钮
计算总数遍历出所有被选中的商品即item.sel 并计算每种商品件数累加
计算总价遍历出每一件商品商品被选中（item.sel）计算总价累加即可
操作异步数据中第一个功能全选即选中每一个已经有的商品更新其状态
updatecart其中updatecart将目前所有数据的最新状态提交给服务器
删除deletecart在服务器中将所选数据删除
添加到购物车addcart将数据库中所需要的数据的所有参数整合到一起提交给服务器否则格式不正确等均会造成错误

 <div>
    <nav-com
      :title="'购物车'"
      left_text=""
      bg_color="#f0f0f0"
      text_color="#999"
    >
      <template #icon_left >
        <span class="iconfont icon-xiangzuojiantou"></span>
      </template>
      <template #icon_right>
        <span class="iconfont icon-sousuo"></span>
      </template>
    </nav-com>
    <div class="goods" v-if="$store.state.cart.goods.length

最低0.47元/天解锁文章

鹤忧_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue项目中模块简介

这个模块主要是对购物车的增删改good对应每一件商品set_goods主要是为了得到数据页面就是改变物品存放的状态全选功能在getters中计算当前新的数据当全部商品都被选中时返回true选中全选按钮计算总数遍历出所有被选中的商品即item.sel 并计算每种商品件数累加计算总价遍历出每一件商品商品被选中（item.sel）计算总价累加即可操作异步数据中第一个功能全选即选中每一个已经有的商品更新其状态updatecart其中updatecart将目前所有数据的最新状态提交给服务器。
复制链接

扫一扫