[JavaScript知识库]vue实战-加入购物车一系列操作

vue实战-加入购物车一系列操作

1.在Detail组件中点击“加入购物车”

同时完成：
①数据存入服务器
②页面组件跳转以及传参
③会话存储

1）数据存入服务器

设置API接口（reqUpdateShopCart）

detail小仓库中的处理

判断是否存入成功，返回为200则为存入成功。

会话存储

跳转到AddCartSuccess组件需要传临时的商品信息到该组件动态显示出来，所以用到会话存储

由于skuInfo的数据类型是对象，而sessionStorage没法存，得转换成字符串。
所以用JSON.stringify()
使用时再转换成对象

2）添加临时游客身份uuid

为了使得能将成功添加到购物车的数据能取出来，必须要有一个身份标识，使用uuid来随机生成一个临时游客身份标识，这样在需要购物车数据时，才能从服务器中取出存入的含有身份标识的数据。
在加入购物车的同时添加uuid标识，因为只能传参固定位，于是想到在发送请求的请求头中还可以传参。
首先，在detail仓库中得到这个uuid

在src中创建一个工具文件夹utils的uuid_token.js（为了设置获得uuid的存储以及为了它的唯一性）
uuid_token.js

import { v4 as uuidv4 } from 'uuid'
export const getUUID = ()=>{
    let uuid_token = localStorage.getItem('GETUUID')
    if(!uuid_token){
        uuid_token = uuidv4()
        localStorage.setItem('GETUUID',uuid_token)
    }
    return uuid_token
}

最后将仓库中获得的uuid放入请求头headers中

成功在shopCart仓库中获得数据。

2.在购物车中的操作

1）设置获取购物车数据的API

因为存在了临时id：uuid，在shopCart仓库中可以获得购物车的动态数据

2）设置shopCart仓库

①派发actions

②store中处理

import {reqCartList} from '@/api'

const state = {
    shopCartList:[]
}
const mutations = {
    GETSHOPCARTLIST(state,shopCartList){
        state.shopCartList = shopCartList
    }
}
const actions = {
    async getShopCartList({commit}){
        let result = await reqCartList()
        if(result.code==200){
            commit('GETSHOPCARTLIST',result.data)
        }
    }
}
const getters = {
    cartList(state){
        return state.shopCartList[0].cartInfoList || []
    }
}

export default {
    state,
    mutations,
    actions,
    getters
}

仓库中的数据

通过getters计算属性简化需要的对象，在ShopCart组件页面动态展示。

3）在组件中动态展示数据

①商品数量模块处的处理

 <li class="cart-list-con5">
		 <a href="javascript:void(0)" class="mins" @click="handler('minus',-1,cart)">-</a>
		 <input autocomplete="off" type="text" :value="cart.skuNum" minnum="1" class="itxt" @change="handler('text',$event.target.value,cart)">
		 <a href="javascript:void(0)" class="plus" @click="handler('add',1,cart)">+</a>
 </li>

handler方法
防止操作太快导致的数量会为0或者负数，需要使用节流

  handler:throttle( async function(type,duNUm,cart){
        switch(type){
          case 'minus':
            if(cart.skuNum < 1){
              duNUm = 0
            }
            duNUm = -1
            break
          case 'add':
            duNUm=1
            break
          case 'text':
            if (isNaN(duNUm) || duNUm < 0) {
              duNUm = 0;
            } else {
              duNUm = parseInt(duNUm) - cart.skuNum;
            }
            break
        }
        try {
          await this.$store.dispatch('addUpdateShopCart',{skuId:cart.skuId,skuNum:duNUm})
          this.getData()
        } catch (error) {
          alert(error.message)
        }
      }
    ,1000)

②删除单个商品操作
设置api

vuex配置

删除按钮触发的方法

 async deleteCartById(cart){
        try {
          await this.$store.dispatch('deleteShopCartById',cart.skuId)
          this.getData()
        } catch (error) {
          alert(error.message)
        }
      }

③切换商品选中状态
设置api

vuex设置

勾选触发方法

  async updateCheckCart(cart,$event){
        try {
          let checked = $event.target.isChecked ? '1':'0'
          await this.$store.dispatch('getUpdateShopCartCheck',{skuId:cart.skuId,isChecked:checked})
          this.getData()
        } catch (error) {
          alert(error.message)
        }
      }

④删除选中商品
在vuex中操作，结合之前是删除单个商品的接口来处理

触发事件的方法

deleteAllisCheckedCart(){
        try {
          this.$store.dispatch('deleteAllCheckedCart')
          this.getData()
        } catch (error) {
          alert(error.message)
        }
      },

⑤全选或全不选
vuex操作

触发事件方法

    async updateAllCheckCart(event){
        try {
          let isChecked = event.target.checked ? '1':'0'
          await this.$store.dispatch('updateAllCheckCart',isChecked)
          this.getData()
        } catch (error) {
          alert(error.message)
        }
      }

最终，完成购物车的一系列操作。