购物车：手把手教你实现全选，全不选，单选，计算总价和件数（vuex 的经典实战案例）

前端

2023-11-19 23:54:02

前言

购物车是电子商务网站必不可少的组成部分，它允许用户在浏览商品时将商品添加到购物车中，并在准备购买时进行结算。购物车通常具有全选、全不选、单选、计算总价和计算件数等功能。

实现这些功能需要前端和后端的配合。前端负责渲染购物车界面，并根据用户的操作触发相应的事件。后端负责处理用户的请求，并将处理结果返回给前端。

本文将重点介绍如何使用 Vuex 来实现购物车的全选、全不选、单选、计算总价和计算件数功能。Vuex 是一个状态管理工具，可以帮助我们轻松地管理应用程序的状态。

实现购物车功能

1. 定义状态

首先，我们需要定义购物车状态。购物车状态包括以下属性：

cartItems：购物车中的商品列表
totalPrice：购物车中商品的总价
totalQuantity：购物车中商品的总件数

2. 定义 Mutations

接下来，我们需要定义 Mutations。Mutations 是用于修改状态的函数。购物车功能需要以下 Mutations：

ADD_TO_CART：将商品添加到购物车
REMOVE_FROM_CART：将商品从购物车中删除
UPDATE_CART_ITEM：更新购物车中商品的数量
CLEAR_CART：清空购物车

3. 定义 Getters

Getters 是用于从状态中获取数据的函数。购物车功能需要以下 Getters：

cartItemsCount：获取购物车中商品的件数
cartItemsTotal：获取购物车中商品的总价

4. 定义 Actions

最后，我们需要定义 Actions。Actions 是用于触发 Mutations 的函数。购物车功能需要以下 Actions：

addToCart：将商品添加到购物车
removeFromCart：将商品从购物车中删除
updateCartItem：更新购物车中商品的数量
clearCart：清空购物车

5. 使用 Vuex 来实现购物车功能

现在，我们可以使用 Vuex 来实现购物车的全选、全不选、单选、计算总价和计算件数功能。

首先，我们需要在 Vuex 的 store 中注册购物车模块。购物车模块的代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cartItems: [],
    totalPrice: 0,
    totalQuantity: 0
  },
  mutations: {
    ADD_TO_CART (state, payload) {
      const item = state.cartItems.find(item => item.id === payload.id)
      if (item) {
        item.quantity += payload.quantity
      } else {
        state.cartItems.push(payload)
      }
      state.totalPrice += payload.price * payload.quantity
      state.totalQuantity += payload.quantity
    },
    REMOVE_FROM_CART (state, payload) {
      const index = state.cartItems.findIndex(item => item.id === payload.id)
      if (index > -1) {
        state.cartItems.splice(index, 1)
        state.totalPrice -= state.cartItems[index].price * state.cartItems[index].quantity
        state.totalQuantity -= state.cartItems[index].quantity
      }
    },
    UPDATE_CART_ITEM (state, payload) {
      const item = state.cartItems.find(item => item.id === payload.id)
      if (item) {
        item.quantity = payload.quantity
        state.totalPrice += (payload.quantity - item.quantity) * item.price
        state.totalQuantity += (payload.quantity - item.quantity)
      }
    },
    CLEAR_CART (state) {
      state.cartItems = []
      state.totalPrice = 0
      state.totalQuantity = 0
    }
  },
  getters: {
    cartItemsCount (state) {
      return state.cartItems.length
    },
    cartItemsTotal (state) {
      return state.totalPrice
    }
  },
  actions: {
    addToCart ({ commit }, payload) {
      commit('ADD_TO_CART', payload)
    },
    removeFromCart ({ commit }, payload) {
      commit('REMOVE_FROM_CART', payload)
    },
    updateCartItem ({ commit }, payload) {
      commit('UPDATE_CART_ITEM', payload)
    },
    clearCart ({ commit }) {
      commit('CLEAR_CART')
    }
  }
})

然后，我们需要在 Vue 组件中使用购物车模块。购物车组件的代码如下：

<template>
  <div>
    <div v-for="item in cartItems" :key="item.id">
      <p>{{ item.name }}</p>
      <p>{{ item.price }}</p>
      <p>{{ item.quantity }}</p>
      <button @click="removeFromCart(item)">-</button>
      <button @click="updateCartItem(item, item.quantity + 1)">+</button>
    </div>
    <div>
      <button @click="clearCart">清空购物车</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('cart', ['cartItems']),
    ...mapGetters('cart', ['cartItemsCount', 'cartItemsTotal'])
  },
  methods: {
    ...mapMutations('cart', ['removeFromCart', 'updateCartItem', 'clearCart']),
    ...mapActions('cart', ['addToCart'])
  }
}
</script>