实战项目名称:实现购物车功能
文章目录
- 一、实战步骤
- 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
实现购物车的方法有很多,在这里就主要下面这一种 (思路)
-
- 先看看购物车中,是否已经有了某件产品,有的话返回产品的
index
下标;
- 先看看购物车中,是否已经有了某件产品,有的话返回产品的
-
- 如果index的值-1,则不存在有重复的产品,反之我们就利用
splice()
移除相应下标的值;
- 如果index的值-1,则不存在有重复的产品,反之我们就利用
-
- 产品数量只有在不为0的基础上,才会更新到
ShoppingCart
中
- 产品数量只有在不为0的基础上,才会更新到
当然除了这一种方法还有其他,有人可能会问,为什么要整个删除再添加上去新的呢,直接改掉下标相应的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}}