【uniapp】利用Vuex实现购物车功能

实战项目名称：实现购物车功能

---

提示：本实战内容大部分为具体实现的思路，界面方面暂时不公布。

一、实战步骤

1. 先编辑store.js文件

代码如下（示例）：

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

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		ShoppingCart: []
	},
	mutations: {
		SETSHPPING(state, product) {
		//后面再讲解具体实现
		},
	},
	actions: {},
	modules: {}
})

export default store

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2. 定义方法和基本的结构

object的基本结构：
{ id: “601a73e0ab8a25000ad243fe”, name: “特濃比利時朱古力”, total: 1, price: 100}

代码如下（示例）：

// 对应增加数量
			add()
				this.sum += 1   // sum是想买的数量
				var pPrice = null     //这里是为了处理有没有特价处理的商品
				if (this.arr.special_price === null) {
					//没有特价则直接用price
					pPrice = this.arr.price
				} else {
				  //是特价则用special_price
					pPrice = this.arr.special_price
				}
				let list = {
					id: this.arr._id,   //商品id
					name: this.arr.name[0].text,   //商品名称
					total: this.sum,    //商品数量
					price: pPrice    //商品价格
				}
				console.log(list)
	// mock数据
	// { id: "601a73e0ab8a25000ad243fe", name: "特濃比利時朱古力", total: 1, price: 100}

// 减少数量的方法基本一致
// 只需将this.sum += 1改为 this.sum -= 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3. 编写SETSHPPING

实现购物车的方法有很多，在这里就主要下面这一种 （思路）

• 1. 先看看购物车中，是否已经有了某件产品，有的话返回产品的index下标;
• 2. 如果index的值-1，则不存在有重复的产品，反之我们就利用splice()移除相应下标的值;
• 3. 产品数量只有在不为0的基础上，才会更新到ShoppingCart中

当然除了这一种方法还有其他，有人可能会问，为什么要整个删除再添加上去新的呢，直接改掉下标相应的total值不就行了吗？
其实，只更新total数量值是不行的，因为产品的各属性每一秒都有可能发生改变，所以整个替换掉是更符合开发逻辑的

代码如下（示例）：

SETSHPPING(state, product) {
			let arr = store.state.ShoppingCart
			// 先看看购物车中，是否已经有了某件产品，有的话返回产品的index下标
			let index = arr.findIndex(item => {
				return item.id == product.id;
			});
			// console.log(index)
			// 如果index的值-1，则不存在有重复的产品，反之我们就移除相应下标的值
			if (index != -1) {
				arr.splice(index, 1)
			}
			// 产品数量只有在不为0的基础上，才会更新到ShoppingCart中
			if (product.total != 0) {
				state.ShoppingCart.push(product)
			}

			// console.log(state.ShoppingCart)

		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

---

二、在项目中调用

1. 触发相应的mutations

代码如下（示例）：

// 这里的list就是上方提到的产品信息
    let list = {
			id: this.arr._id,   //商品id
			name: this.arr.name[0].text,   //商品名称
			total: this.sum,    //商品数量
			price: pPrice    //商品价格
	}
// 通过下方的commit，我们就可以触发mutations，进行下一步
this.$store.commit('SETSHPPING',list) 
1
2
3
4
5
6
7
8
9

2. 利用computed计算数量和总价的方法

利用computed可以达到购物车数据的动态更新

computed:{
	//计算购物车产品的总数量
			total(){
				let arr = this.$store.state.ShoppingCart
				var sum = 0
				arr.map( (item) => {
					sum += item.total
				})
				return sum
			},
	// 计算购物车的总价
			price(){
				let arr = this.$store.state.ShoppingCart
				var a = 0
				arr.map( (item) => {
					a += item.total * item.price
				})
				return a
			}
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

---