商城小程序(7.加入购物车)

目录

一、配置vuex

新建store目录,并创建store.js文件用于管理vuex相关内容

在store.js中 初始化store的实例对象

// 1.导入vue和vuex
import {createStore} from 'vuex'
// 导入购物车的vue模块
import moduleCart from '@/store/cart.js'



// 3.创建store的实例对象
const store = createStore({
	modules: {
		// 购物车的vuex模块,模块内成员的访问路径被调整为m_cart
		'm_cart': moduleCart
	}
})

// 4.向外共享store的实例对象
export default store

在main.js 中导入store实例对象并挂载到vue的实例上

二、创建购物车的store模块

同样目录下创建cart.js模块

在cart.js中,初始化如下的vuex模块

export default {
	// 为当前模块开启命名空间
	namespaced: true,
	
	
	// 模块的state数据
	state: () => ({
		//购物车数组,用来存储购物车中每个商品的信息对象
		//每个商品的信息对象,都包含如下6个属性:
		//{goods_id  goods_name  goods_price  goods_count  goods_small_logo  goods_state}
		cart: []
	}),
	
	//模块的mutations方法
	mutations: {},
	
	// 模块的getters属性
	getters: {}
}

在store/store.js 模块中,导入并挂载购物车中的vue模块

三、在商品详情页中使用store模块

商品详情页面测试,是否能成功调用:


四、实现购加入购物车功能

在store目录下的cart.js模块中,封装一个将商品信息加入购物车的mutations方法,名为addToCart

	//模块的mutations方法
	mutations: {
		addToCart(state, goods){
			// 根据提交的商品Id,查询购物车中是否存在这个商品
			const findResult = state.cart.find(x => x.goods_id === goods.goods_id)
			// 如果不存在,则findResult 为 undefined 否则,为查找到的商品信息对象
			if(!findResult) {
				//如果购物车中没有这件商品,则直接push
				state.cart.push(goods)
			} else {
				// 如果购物车中有这件商品,则只更新数量即可
				findResult.goods_count++
			}
		}
	},

在商品详细页面中,通过mapMutations这个辅助方法,把vuex中的m_cart模块下的addToCart方法映射到当前页面:

为商品导航组件 uni-goods-nav 绑定 @buttonClick="buttonClick"事件处理函数:

五、动态统计购物车中商品的总数量

在cart.js模块中,在getters节点中定义一个total方法,用于统计购物车中商品的总数量

	// 模块的getters属性
	getters: {
		//统计购物车中商品的总数量
		total(state) {
			let c = 0
			//循环统计商品的数量,累加到变量c中
			state.cart.forEach(goods => c += goods.goods_count)
			return c
		}
	}

在商品详情页面的script标签中,按需导入mapGetters方法并进行使用

通过watch侦听器,监听计算属性total值的变化,从而动态为购物车按钮的徽标赋值

点击加入购物车 实现添加功能

六、持久化存储购物车的商品

修改cart.js 模块中的state函数,读取本地存储的购物车数据,对cart数组进行初始化

七、优化商品详情页的total侦听器


重新加载页面,就能成功回显

八、动态为tabBar页面设置数据徽标

把store中的total映射到cart.vue中使用:

在页面刚显示出来的时候,立即调用setBadge方法,为tabBar设置数字徽标

在methods中,声明setBadge方法,通过uni.setTabBarBadge()为tabBar设置数字徽记

点击进入购物车页面

九、将设置tabBar徽标的代码抽离为mixins


选中首页,分类等界面也会反应出购物车徽标

相关推荐
new出一个对象1 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥2 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
dccose3 小时前
vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数
小程序·uni-app
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
天天进步20155 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员6 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
疯狂的沙粒6 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript