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

文章目录

• 一、实战步骤
• • 1. 先编辑`store.js`文件
  • 2. 定义方法和基本的结构
  • 3. 编写`SETSHPPING`
• 二、在项目中调用
• • 1. 触发相应的`mutations`
  • 2. 利用`computed`计算数量和总价的方法

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

一、实战步骤

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

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

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

代码如下（示例）：

// 对应增加数量add()this.sum += 1   // sum是想买的数量var pPrice = null     //这里是为了处理有没有特价处理的商品if (this.arr.special_price === null) {//没有特价则直接用pricepPrice = this.arr.price} else {//是特价则用special_pricepPrice = this.arr.special_price}let list = {id: this.arr._id,   //商品idname: 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

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. 触发相应的mutations

代码如下（示例）：

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

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

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

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