商城小程序（7.加入购物车）

一、配置vuex
二、创建购物车的store模块
三、在商品详情页中使用store模块
四、实现购加入购物车功能
五、动态统计购物车中商品的总数量
六、持久化存储购物车的商品
七、优化商品详情页的total侦听器
八、动态为tabBar页面设置数据徽标
九、将设置tabBar徽标的代码抽离为mixins

一、配置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方法并进行使用
在这里插入图片描述