vue之vuex实现购物车功能

怼烎@ 2023-03-12 12:21 5阅读 0赞

### vuex购物车 ###

*   *   *   *  一、为什么用vuex来实现购物车功能
             *  二、用到的vuex知识点。
             *  三、store结构，主要文件用法。
             *  四、购物车页面的主要使用（部分代码）

#### 一、为什么用vuex来实现购物车功能 ####

> 原本项目是没有完全用vuex来实现的，但购物车的一些公共状态，还有方法很混乱，最后为了开发维护使用方便就用了。购物车有很多实现方式，适合就好。

#### 二、用到的vuex知识点。 ####

*  module模块化，namespaced命名空间
 *  state, actions, mutations,getters主要用法
 *  辅助函数，方法调用。

> [vue之状态管理器vuex（三）][vue_vuex] 这是另外一篇的用法

#### 三、store结构，主要文件用法。 ####

![store结构][store]

*  modules：按照功能划分的vuex模块，一般构建大些的项目时，条理更加清晰，便于维护开发。这里主要说 ***cart.js*** 购物车功能
 *  index.js : store的入口文件，各功能的继承。
 *  type.js : 定义方法常量，大写字母加下划线构成，可用可不用，根据情况。
 *  在app.vue中引入挂载，上个文章里有，不多说。

1.  index.js （功能介绍都写在代码注释里吧）

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    //引入modules模块
    import cart from './modules/cart.js'
    
    //实例化vuex为store模块，挂载上cart,在下面导出，在app.vue引入挂载全局。
    const store = new Vuex.Store({ 
    	modules: { 
    		cart
    	}
    })
    
    export default store

1.  cart.js （购物车功能都在这里了）

> 代码中用到的一些uni-app接口方法，可根据实际情况替换。

// 引入请求数据接口的封装，每人实现和用法不一样。引入store，为了用一些方法。
    import http from '@/common/request/index'
    import store from '@/common/store'
    
    // vuex方法常量的引入，让vuex的功能更细清晰，可用可不用，看需要。
    import { 
    	CART_LIST,
    	CART_NUM
    } from '../types.js'
    
    // vuex中state模块,定义当前功能用到的变量数据，类似data的初始化数据
    // 页面调用：this.$store.state.cart.变量名
    const state = { 
    	cartList: [], //购物车数据。
    	allSelected: false, //购物车的全选状态。
    	cartNum: uni.getStorageSync('cartNum') ? uni.getStorageSync('cartNum') : '', //购物车,涉及到刷新数据丢失，所以存了本地,接口是uni.app框架的。
    }
    
    // vuex中actions模块，主要定义一些异步方法。
    // 页面触发调用：this.$store.dispatch('方法名'，参数只能有一个)
    /** *action和mutation都可以改变state中数据的状态，但是action可以处理异步函数可以在devtool中追 *踪数据变化，而mutation只可以处理同步函数，当处理异步函数的时候检测不到数据变化； */
    const actions = { 
    	// 购物车数据（查）
    	getCartList({ 
    		commit,
    		state
    	}) { 
    		return new Promise((resolve, reject) => { 
    			http('cartList').then(res => {  //请求数据,无传参。
    				let cartData = res.data;
    				cartData.map(item => {  // 重构购物车数据，加入选中状态，做单选多选用。
    					item.checked = false;
    				})
    				uni.setStorageSync('cartNum', cartData.length); //购物车数量
    				commit('CART_LIST', cartData); // 重构后的数据，提交给commit,触发数据更新。
    				commit('checkCartList'); // 每次请求购物车数据，做一次全选检测（全选时候加入新的购物车商品场景）
    			}).catch(e => { 
    				reject(e)
    			})
    		})
    	},
    	// 添加到购物车（增）
    	addCartGoods({ 
    		commit
    	}, data) { 
    		return new Promise((resolve, reject) => { 
    			http('cartAdd', {  // 添加购物车，传入商品id.
    				goodsId: data.id,
    			}).then(res => { 
    				resolve(res)
    				store.dispatch('getCartList'); //更新购物车数。
    			}).catch(e => { 
    				reject(e)
    			})
    		})
    	},
    	// 删除购物车商品（删）
    	changeCartList({ 
    		commit,
    		state,
    		dispatch
    	}, param) { 
    		return new Promise((resolve, reject) => { 
    			http('cartDelete', {  // 删除购物车商品，传入ids;
    				cartIds: param.ids,
    			}).then(res => { 
    				if (res.code === 1) { 
    				dispatch('getCartList');//删除后，更新购物车。
    				}
    			}).catch(e => { 
    				reject(e)
    			})
    		})
    	},
    }
    
    // vuex中mutations,主要用来触发数据更新，一些数据的同步操作。
    // 页面分发调用：this.$store.commit('方法名'，参数只能有一个)
    const mutations = { 
    	// cart数据获取变动。
    	[CART_LIST](state, data) { 
    		state.cartList = data
    	},
    	// 切换全选。
    	changeAllSellect(state) { 
    		state.allSelected = !state.allSelected;
    	},
    	// 全选设置，传入全选按钮的状态。
    	getAllSellectCartList(state, flag) { 
    		state.cartList.map(item => { 
    			item.checked = flag
    		})
    	},
    	// 单选设置，传入单选的商品下标，改变它的选中状态。
    	selectItem(
    		state, { 
    			index,
    			flag
    		}) { 
    		state.cartList[index].checked = !flag;
    		store.commit('checkCartList') // 每次单选，都要检测是否全部选中了。
    
    	},
    	// 全选检测
    	checkCartList(state) { 
    		let all = true;
    		state.cartList.map(item => { 
    			if (!item.checked) {  // 枚举购物车数据，默认是全选，有一个没被选中，全选为false。
    				all = false
    			}
    		})
    		state.allSelected = all; // 更改全选状态。
    	}
    }
    
    //vuex中的getter,类似vue的computed计算属性，惰性动态监听计算数据，二次处理数据用。
    // 页面调用：this.$store.getters.getters中的变量名（注意不是state中的）
    const getters = { 
    	// 购物车数量和总价
    	totalCount: state => { 
    		let totalNum = 0;
    		let totalPrice = 0;
    		state.cartList.filter(item => { 
    			if (item.checked) {  // 筛选选中的商品，实时计算价格，数量。
    				totalNum += 1;
    				totalPrice += item.goods_num * item.sku_price.price;
    			}
    		})
    		return { 
    			totalNum,
    			totalPrice
    		}
    	},
    }
    
    export default { 
        //namespaced：true,命名空间，防止方法污染，根据情况用。
    	state,
    	mutations,
    	actions,
    	getters
    }

#### 四、购物车页面的主要使用（部分代码） ####

// 引入vuex 辅助函数，上面每个模块在页面中的用法也可以，推荐辅助函数。
    import {  mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    export default 
    	computed: { 
    		...mapState({ 
    			cartList: ({  cart }) => cart.cartList,//在计算属性中获取vuex的数据，解构的cart模块，然后取值赋值。
    			allSel: ({  cart }) => cart.allSelected
    		}),
    		...mapGetters(['totalCount'])//直接拿getters中的处理过的数据。
    	},
    	created() { 
    		this.getCartList();//获取页面数据。
    	},
    	methods: { 
    		...mapActions(['getCartList', 'changeCartList']),//在这拿actions中的方法。
    		// 单选
    		onSel(index, flag) {  //传入单选的下标，和选中状态，在vuex中接收。
    			let that = this;
    			that.$store.commit('selectItem', {  index, flag });
    		},
    		// 全选
    		onAllSel() { 
    			let that = this;
    			that.$store.commit('changeAllSellect'); //按钮切换全选。
    			that.$store.commit('getAllSellectCartList', that.allSel); //列表全选
    		},
    		// 删除
    		goodsDelete() { 
    			let that = this;
    			let {  cartList } = this;
    			let ids= [];
    			cartList.map(item => {  //枚举出选中的商品，把id放入数组，传给vuex方法。
    				if (item.checked) { 
    					ids.push(item.id);
    				}
    			});
    			this.changeCartList({  ids: ids });
    		}
    	}
    };

> 基本就这些，有问题或者建议可以留言。

[vue_vuex]: https://blog.csdn.net/qq_42690547/article/details/93194728
[store]: /images/20230312/5d9b7d28f4f64eb3891fd5b3d1d2010d.png