vue项目购物车功能中vuex的运用

最新推荐文章于 2022-11-19 10:09:05 发布

原创

最新推荐文章于 2022-11-19 10:09:05 发布 · 1.8k 阅读

10 ·

CC 4.0 BY-SA版权

本文回顾了在Vue项目中如何使用Vuex实现购物车功能，包括添加商品逻辑、actions、mutations、mutation-types的组织，以及getters的使用，展示了如何通过划分store结构和辅助函数简化状态管理。

文章目录

介绍

最近在学习做vue的一个购物街商城的一个项目，其中购物车功能用到了vuex的知识，这里做一个回顾，总结下用到的功能，加深一下回顾。
首先，由于项目之前的功能没有用到vuex，所以安装vuex

npm install vuex --save

然后我们将商品页点击购物车，按钮功能完成了

购物车添加商品功能

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2pJrsvsq-1613228807177)(/Users/mac/Desktop/前端学习笔记/vue/项目vuex运用/1.jpg)]

// 加入购物车
addToCart() {
   
   
  // 获取购物车需要展示的商品信息
  const product = {
   
   }
  product.image = this.topImages[0]
  product.title = this.goods.title
  product.desc = this.goods.desc
  product.price = this.goods.realPrice
  product.iid = this.iid

  // 将商品添加到购物车中
  // this.$store.commit('addCart', product)
  this.$store.dispatch('addCart', product)
}