使用vuex较为优雅的实现一个购物车功能的代码实例

// cart模块
export const CART_ADD_PRODUCT_TO_CART = 'CART_ADD_PRODUCT_TO_CART' // 添加购物车
export const CART_DEL_PRODUCT_TO_CART = 'CART_DEL_PRODUCT_TO_CART' // 删除购物车
export const CART_CHANGE_LOGIN_STATUS = 'CART_CHANGE_LOGIN_STATUS' // 切换登陆状态
export const CART_ADD_PRODUCT_QUANTITY = 'CART_ADD_PRODUCT_QUANTITY' // 添加商品数量
export const CART_DEL_PRODUCT_QUANTITY = 'CART_DEL_PRODUCT_QUANTITY' // 减少商品数量
export const CART_SET_CHECKOUT_STATUS_ALL = 'CART_SET_CHECKOUT_STATUS_ALL'  // 一键改变所有商品购买状态的方法

// products模块
export const PRODUCTS_SET_PRODUCT = 'PRODUCTS_SET_PRODUCT' // 获取所有商品的列表

import { fetchGet } from "@/api/index" // api文件夹下封装的axios.get请求函数
import * as types from '../types' // types目录下的mutations函数的常量名
const state = {
 recommendList: [] // 存放所有商品的信息
}

const getters = {}

const mutations = {
 [types.PRODUCTS_SET_PRODUCT](state, products) { // 第一个参数是state 可以修改state 将请求回来的数据保存在state中
  state.recommendList = products
 }
}

const actions = {
 getAllProducts({ commit }) { // 所有的api请求都放在actions中
  fetchGet("/cart").then(res => {
   let allProducts = res.data.list.list
   commit(types.PRODUCTS_SET_PRODUCT, allProducts)
  })
 }
}

export default {
 namespaced: true, // 添加命名空间
 state,
 getters,
 mutations,
 actions
}

 /*
 {
  productid: "11137",
  name: "小米CC9 Pro 6GB+128GB", 
  price: 2799, 
  image: "//i1.mifile.cn/a1/pms_1572941393.18077211.jpg"，
  comments: 0
 }
 */

this.$store.dispatch("products/getAllProducts"); 
methods: mapActions("cart", ["addProductToCart"])

computed: mapGetters("user", ["loginStatus"])

import * as types from '../types'

const state = { // 购物车需要自己的状态 购物列表
 items: [ 
  { productid: "11137", quantity: 1, checkoutStatus: false },
  { productid: "8750", quantity: 1, checkoutStatus: false }
 ]
}

const getters = {
 // 返回购物车商品列表完整信息
 cartProducts: (state, getters, rootState) => {
  if (!state.items.length) return [] // map不会对空数组进行检测 map不会改变原始数组
  return state.items.map(({ productid, quantity, checkoutStatus }) => { // map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。
   const product = rootState.products.recommendList.find(product => product.productid === productid) // 拿到items中的数据去查阅products中的数据, rootState(根节点状态)参数可以拿到别的模块的state状态
   if (!product) return {} // action请求异步，如果此时的数据还没有请求回来 就返回空对象
   return {
    src: product.image, // product的图片地址
    name: product.name, // product的名字
    price: product.price, // product的单价
    productid, // product的id
    quantity, // product的数量，默认为1
    simpleTotal: quantity * product.price, // 单项product的总价价
    checkoutStatus: checkoutStatus // product的选中状态
   }
  })
 },
 // 返回选中商品的总价
 cartTotalPrice: (state, getters) => {
  return getters.cartProducts.reduce((total, product) => {
   if (product.checkoutStatus) {
    return total + product.simpleTotal
   }
   return total
  }, 0)
 },
 // 返回所有商品总价,不管有没有选中
 allPrice: (state, getters) => {
  return getters.cartProducts.reduce((total, product) => {
   return total + product.simpleTotal
  }, 0)
 },
 // 返回所有商品总数量,不管有没有选中
 allProducts: (state, getters) => {
  return getters.cartProducts.reduce((total, product) => {
   return total + product.quantity
  }, 0)
 },
 // 返回所有选中的商品数量
 allSelectProducts: (state, getters) => {
  return getters.cartProducts.reduce((total, product) => {
   if (product.checkoutStatus) {
    return total + product.quantity
   }
   return total
  }, 0)
 },
 // 返回所有商品条数
 allProductsItem: (state) => {
  return state.items.length
 },
 // 返回商品是否全选 是返回true 否则false
 isSelectAll: (state) => {
  if (!state.items.length) return false
  return state.items.every(item => { // every() 不会对空数组进行检测
   return item.checkoutStatus === true
  })
 },
 // 返回是否有选中的商品 是返回true 否则false
 hasSelect: (state) => {
  if (!state.items.length) return false
  return state.items.some(item => { // some() 不会对空数组进行检测
   return item.checkoutStatus === true
  })
 }
}

const mutations = {
 // 添加一条商品的方法
 [types.CART_ADD_PRODUCT_TO_CART](state, { productid }) {
  state.items.push({
   productid,
   quantity: 1,
   checkoutStatus: false
  })
 },
 // 删除一条商品的方法
 [types.CART_DEL_PRODUCT_TO_CART](state, productid) {
  state.items.forEach((item, index) => {
   if (item.productid === productid) {
    state.items.splice(index, 1)
   }
  });
 },
 // 增加一条商品中商品数量的方法
 [types.CART_ADD_PRODUCT_QUANTITY](state, productid) {
  const cartItem = state.items.find(item => item.productid == productid)
  cartItem.quantity++
 },
 // 减少一条商品中商品数量的方法
 [types.CART_DEL_PRODUCT_QUANTITY](state, productid) {
  const cartItem = state.items.find(item => item.productid == productid)
  if (cartItem.quantity > 1) { // 商品数量大于1时才能减少
   cartItem.quantity--
  }
  else cartItem.quantity = 1
 },
 // 改变单条商品的选中不选中状态的方法(单选按钮)
 [types.CART_SET_CHECKOUT_STATUS](state, productid) {
  const cartItem = state.items.find(item => item.productid == productid)
  cartItem.checkoutStatus = !cartItem.checkoutStatus
 },
 // 改变所有商品的选中不选中状态的方法(全选按钮)
 [types.CART_SET_CHECKOUT_STATUS_ALL](state, status) {
  state.items.forEach(item => {
   if (!item.checkoutStatus === status) {
    item.checkoutStatus = status
   }
  })
 }
}

const actions = {
 // 添加购物车的方法,如果此时购物车内有该条商品,就添加商品数量,否则添加商品
 addProductToCart({ state, commit }, product) {
  const cartItem = state.items.find(item => item.productid === product.productid)
  if (!cartItem) {
   commit(types.CART_ADD_PRODUCT_TO_CART, { productid: product.productid })
  } else {
   commit(types.CART_ADD_PRODUCT_QUANTITY, cartItem.productid)
  }
 },
 // 购物车内删除一条商品的方法
 delProductToCart({ commit }, productid) {
  commit(types.CART_DEL_PRODUCT_TO_CART, productid)
 },
 // 添加商品数量的方法
 addProductQuantity({ commit }, productid) {
  commit(types.CART_ADD_PRODUCT_QUANTITY, productid)
 },
 // 减少商品数量的方法
 delProductQuantity({ commit }, productid) {
  commit(types.CART_DEL_PRODUCT_QUANTITY, productid)
 },
 // 切换一条商品的选中状态的方法
 setCheckoutStatus({ commit }, productid) {
  commit(types.CART_SET_CHECKOUT_STATUS, productid)
 },
 // 切换所有商品选中状态的方法
 setCheckoutStatusAll({ commit }, status) {
  commit(types.CART_SET_CHECKOUT_STATUS_ALL, status)
 }
}

export default {
 namespaced: true, // 添加命名空间
 state,
 getters,
 mutations,
 actions
}

{
	src: product.image, // product的图片地址
  name: product.name, // product的名字
  price: product.price, // product的单价
  productid, // product的id
  quantity, // product的数量，默认为1
  checkoutStatus: checkoutStatus， // product的选中状态
  simpleTotal: quantity * product.price, // 单项product的总价格
}

import Vue from 'vue'
import Vuex from 'vuex'
import cart from './module/cart'
import products from './module/products'
import user from './module/user'
Vue.use(Vuex)

export default new Vuex.Store({
 // 设计数据中心 模块
 modules: { // 分模块
  user, 
  cart, 	 // 购物车 cart 
  products // 商品 products
 }
})