×

VUE应用:分享简单购物车功能的实例

作者:Terry2021.09.26来源:Web前端之家浏览:4125评论:0
关键词:vuejs

VUE应用:分享简单购物车功能的实例。废话不多说,直接上干货。

  1. <template>
  2.     <div>
  3.         <h1>vuex-shopCart</h1>
  4.         <div class="shop-listbox">
  5.             <shop-list />
  6.         </div>
  7.         <h2>已选商品</h2>
  8.         <div class="shop-cartbox">
  9.             <shop-cart />
  10.         </div>
  11.     </div>
  12. </template>
  13.  
  14. <script>
  15. import shoList from './shop-list'
  16. import shopCart from './shop-cart'
  17.  
  18. export default {
  19.   name: 'shop',
  20.   components: {
  21.       'shop-list' : shoList,
  22.       'shop-cart' : shopCart
  23.   }
  24. }
  25. </script>
  26.  
  27. <!-- Add "scoped" attribute to limit CSS to this component only -->
  28. <style scoped>
  29. </style>

商品列表:

  1. <template>
  2.     <div class="shop-list">
  3.         <table>
  4.             <tr class="shop-listtitle">
  5.                 <td>id</td>
  6.                 <td>名称</td>
  7.                 <td>价格</td>
  8.                 <td>操作</td>
  9.             </tr>
  10.             <tr v-for = "item in shopList" class="shop-listinfo" :key="item.id">
  11.                 <td>{{item.id}}</td>
  12.                 <td>{{item.name}}</td>
  13.                 <td>{{item.price}}</td>
  14.                 <td>
  15.                     <button @click="addToCart(item)">加入购物车</button>
  16.                 </td>
  17.             </tr>
  18.         </table>
  19.     </div>
  20. </template>
  21.  
  22. <script>
  23. import {mapGetters,mapActions} from "vuex";
  24. export default {
  25.     name : 'shopList',
  26.     computed: {
  27.         ...mapGetters({
  28.                 shopList:'getShopList',
  29.             })
  30.     },
  31.     methods: {
  32.         ...mapActions(['addToCart'])
  33.     },
  34. }
  35. </script>

选中商品列表:

  1. <template>
  2.     <div class="shop-list">
  3.         <table>
  4.             <tr class="shop-listtitle">
  5.                 <td>id</td>
  6.                 <td>名称</td>
  7.                 <td>价格</td>
  8.                 <td>数量</td>
  9.                 <td>操作</td>
  10.             </tr>
  11.             <tr v-for="item in cartData" class="shop-listinfo" :key="item.id">
  12.                 <td>{{item.id}}</td>
  13.                 <td>{{item.name}}</td>
  14.                 <td>{{item.price}}</td>
  15.                 <td>{{item.num}}</td>
  16.                 <td><button class="shop-dele dele-btn" @click="deleteShop(item)">删除</button></td>
  17.             </tr>
  18.             <tr v-if="cartData.length <= 0">
  19.                 <td colspan="5">暂无数据</td>
  20.             </tr>
  21.             <tr>
  22.                 <td colspan="2">总数:{{totalNum}}</td>
  23.                 <td colspan="2">总价格:{{totalPrice}}</td>
  24.                 <td><button class="dele-cart dele-btn" @click="clearCart">清空购物车</button></td>
  25.             </tr>
  26.         </table>
  27.     </div>
  28. </template>
  29.  
  30. <script>
  31. import {mapGetters,mapActions} from 'vuex'
  32. export default {
  33.     name : 'shopCart',
  34.     data(){
  35.         return{
  36.             
  37.         }
  38.     },
  39.     computed: {
  40.         ...mapGetters({
  41.             cartData:'addShopList',
  42.             totalNum : 'totalNum',
  43.             totalPrice:'totalPrice'
  44.         })
  45.     },
  46.     methods: {
  47.         ...mapActions({
  48.             clearCart:'clearToCart',
  49.             deleteShop:"deletToShop"
  50.         })
  51.     }
  52. }
  53. </script>

vuex 创建

npm install vuex --save,创建vuex文件夹,在文件夹中创建store.js,引入vuex;

store.js

  1. import Vue from "vue"
  2. import Vuex from 'vuex'
  3. import cart from './modules/cart'
  4.  
  5. Vue.use(Vuex)
  6.  
  7. export default new Vuex.Store({
  8.     modules: {
  9.         cart
  10.     }
  11. })

建立一个模块文件夹modules,里面创建创建当个store模块,然后默认输出,在store.js中引入;

cart.js

  1. const state = {
  2.     shop_list: [{
  3.         id: 11,
  4.         name: '鱼香肉丝',
  5.         price : 12
  6.     }, {
  7.             id: 22,
  8.             name: '宫保鸡丁',
  9.             price : 14
  10.         }, {
  11.             id: 34,
  12.             name: '土豆丝',
  13.             price : 10
  14.         }, {
  15.             id: 47,
  16.             name: '米饭',
  17.             price : 2
  18.         }, {
  19.             id: 49,
  20.             name: '蚂蚁上数',
  21.             price : 13
  22.         }, {
  23.             id: 50,
  24.             name: '腊肉炒蒜薹',
  25.             price : 15
  26.         }],
  27.         add : []
  28. }
  29.  
  30. const getters = {
  31.     // 获取商品列表
  32.     getShopList: state => state.shop_list,
  33.     // 获取购物车列表
  34.     addShopList: state => {
  35.         // map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值
  36.         return state.add.map(({ id, num }) => {
  37.             let product = state.shop_list.find(=> n.id == id)// find()方法返回通过测试(函数内判断)的数组的第一个元素的值,如果没有符合条件的元素返回undefined
  38.             if (product) {//    如果存在该商品
  39.                 return {//  返回对象
  40.                     ...product,
  41.                     num
  42.                 }
  43.             }
  44.         })
  45.     },
  46.      // 获取总数量
  47.      totalNum: (state, getters) => {
  48.          let total = 0
  49.          getters.addShopList.map(=> { 
  50.              total += n.num
  51.          })
  52.          return total
  53.     },
  54.     // 计算总价格
  55.     totalPrice: (state, getters) => { 
  56.         let total = 0
  57.         getters.addShopList.map(=> { 
  58.             total += n.num * n.price
  59.         })
  60.         return total
  61.     }
  62. },
  63.  
  64. const actions = {
  65.     // 加入购物车
  66.     addToCart({ commit},product) { 
  67.         commit('addCart', {
  68.             id : product.id
  69.         })
  70.     },
  71.     // 清空购物车
  72.     clearToCart({ commit}) { 
  73.         commit('clearCart')
  74.     },
  75.     // 删除单个物品
  76.     deletToShop({ commit},product) { 
  77.         commit('deletShop',product)
  78.     }
  79. }
  80.  
  81. const mutations = {
  82.     // 加入购物车
  83.     addCart(state, { id}){ 
  84.         let record = state.add.find(=> n.id == id)
  85.         if (!record) {//   如果购物车中不存在该商品
  86.             state.add.push({//  追加商品
  87.                 id,
  88.                 num : 1
  89.             })
  90.         } else { // 如果商品已经加入购物车,则改变数量
  91.             record.num++
  92.         }
  93.     },
  94.     // 删除单个物品
  95.     deletShop(state, product) { 
  96.         state.add.forEach((item,i) => { 
  97.             if (item.id == product.id) {//  如果找到该商品 
  98.                 state.add.splice(i,1)
  99.             }
  100.         })
  101.     },
  102.     // 清空购物车
  103.     clearCart(state) { 
  104.         state.add = []
  105.     }
  106. }
  107.  
  108. export default {
  109.     state,
  110.     getters,
  111.     actions,
  112.     mutations
  113. }


您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vuejs20210926.html

网友评论文明上网理性发言 已有0人参与

发表评论: