vue 实现购物车(Vuex)
在电商项目当中,都会有购物车的功能,购物车一般都有,加入购物车并保存本地(localStorage)、从本地把数据取出来并渲染页面、点击复选框(商品前面和底部的全选实现)、价格的加加减减。在这里我只是简单的用Vuex来实现购物车的功能。首先,要对Vuex有一个简单的了解1、Vuex是什么?运用到了js设计模式中的单例模式,单例模式想要做到的是,不管我们尝试去创建多少次,它都只给你返回第一次所创建的
在电商项目当中,都会有购物车的功能,购物车一般都有,加入购物车并保存本地(localStorage)、从本地把数据取出来并渲染页面、点击复选框(商品前面和底部的全选实现)、价格的加加减减。
在这里我只是简单的用Vuex来实现购物车的功能。
首先,要对Vuex有一个简单的了解
1、Vuex是什么?
运用到了js设计模式中的单例模式,单例模式想要做到的是,不管我们尝试去创建多少次,它都只给你返回第一次所创建的那唯一的一个实例。
- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 ( state )。
-
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
- 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。——Vuex官方文档
- 主要包括以下几个模块:
-
- State:定义了应用状态的数据结构,可以在这里设置默认的初始状态。
- Getter:允许组件从 Store 中获取数据,mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
- Mutation:是唯一更改 store 中状态的方法,且必须是同步函数。
- Action:用于提交 mutation,而不是直接变更状态,可以包含任意异步操作。
- Module:允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
2、什么时候使用Vuex?
- 如果应用够简单,最好不要使用 Vuex,一个简单的 store 模式即可
- 需要构建一个中大型单页应用时,使用Vuex能更好地在组件外部管理状态
上面就是关于Vuex的简单了解,有什么不足,希望可以指正。
接下来,就是用Vuex实现购物车的功能
1、点击加入购物车并保存本地(localStorage)
在这里来说说三种本地存储:三种存储方式
效果:
代码:(注:在这里的代码可能不全,我主要是想把实现购物车的逻辑缕缕)
//-----------------在这里是在<template>里面写的
<el-row :gutter="10">
<el-col
:xs="24"
:sm="12"
:md="8"
:lg="6"
:xl="4"
v-for="(item,index) in showList"
:key="index"
>
<div class="grid-content">
<div class="grid-img">
<img :src="item.productImage" alt />
</div>
<div class="grid-name">{{item.productName}}</div>
<div class="grid-price">{{item.salePrice | addCurrencyTag}}</div>
<div class="grid-addcart" @click="addCart(item)">加入购物车</div>
</div>
</el-col>
</el-row>
解释:
给加入购物车一个点击事件,并把当前点击商品的所有内容,即item作为参数,用来传参。
// ----------------这里是在methods里面写的
// 添加购物车
addCart(item) {
this.$store.dispatch("ADDCART_DATA", item);
},
解释:
在
methods
的方法里,拿到你定义在template
里面的加入购物车的click
事件名,并把上面的参数在这里接受,通过Vuex的this.$store.dispatch('需要触发的action函数',需要传递的参数)
,把item传给Vuex的action函数。
Vuex的store中的index.js文件(这是一个没有改变的index.js文件)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
// --------------是在state里面写的(初始化购物车)
cartItem: JSON.parse(localStorage.getItem("cartItems")) || [], //要保存到本地的数据
cartItem: JSON.parse(localStorage.getItem("cartItems")) || [], //保存到本地的数据
allChecked: false,// 底部的全选按钮
UnitPrice: 0, //单价
total: 0, //总价
// ------------是在mutations里面写的
// 添加购物车
ADDCART_DATA(state, item) {// -----------这里的item就是actions,传过来的参数
// 下面的就是判断去重(因为一个商品,点击第一次的时候,是添加,第二次就是商品数量的加加)
let flag = false;//为了判断本地是否有数据,默认是没有数据
state.cartItem.map(ele => {//遍历在state定义的保存到本地的数组名字
if (ele.item._id == item._id) {//判断state保存到本地的id和传过来的id是否一样,如果一样,则flag为true,当前的商品的数量加加
flag = true;
ele.count++
}
})
// 默认购物车没有商品,如果要添加商品,就是flag为true的时候添加商品
if (!flag) {
// 在这里我添加的内容有,复选框的一个状态,默认是false,还有传过来的item,以及商品数量
state.cartItem.push({
item,
checked: false,
count: 1
})
}
// 计算总价
state.total = 0;
// 遍历保存到本地的商品,如果选中的状态就计算总价
state.cartItem.forEach(ele => {
if (ele.checked) {
state.total += ele.item.salePrice * ele.count;
}
})
// 保存到本地
localStorage.setItem('cartItems', JSON.stringify(state.cartItem))
},
这是保存到本地的结果:
// ------------是在actions里面写的
// =================注意:这里的**ADDCART_DATA**必须和你在页面定义**this.$store.dispatch('需要触发的action函数',需要传递的参数)**的第一个参数一样
// 添加购物车
ADDCART_DATA(context, item) {
// 这里的item就是由页面传过来的对象(即你点击的商品的每一个对象)
// ========= context.commit('需要触发的Mutation函数',要传的参数)
context.commit('ADDCART_DATA', item)
},
2、从本地拿数据并渲染页面
效果:
代码:(注:在这里的代码可能不全,我主要是想把实现购物车的逻辑缕缕)
// 在vue组件内写的,和methods同级
// 下面的就是取值(从Vuex内取值)
computed: {
// 这是保存到本地的数据
cartItem() {
return this.$store.state.cartItem;
},
// 单价
UnitPrice() {
return this.$store.state.UnitPrice;
},
// 总价
total() {
return this.$store.state.total;
}
}
// 渲染页面
<template>
<div>
<div class="Home_box">
<div class="Home_list" v-for="(item,index) in cartItem" :key="index">
<div class="home_check">
<input type="checkbox" :checked="item.checked" @click="selectItem(item)" class="span" />
</div>
<div class="home_img">
<img :src="item.item.productImage" alt />
</div>
<div class="home_name">{{item.item.productName}}</div>
<div class="home_price">¥{{item.item.salePrice}}</div>
<div class="home_button">
<div class="home_button_one" @click="sub(item)">-</div>
<div>{{item.count}}</div>
<div class="home_button_one" @click="add(item)">+</div>
</div>
<div class="home_zojia">¥{{item.item.salePrice*item.count}}</div>
<div class="home_sc" @click="del(index)">删除</div>
</div>
</div>
<!-- 底部 -->
<div class="home_footer">
<div style="margin-left:20px;">
<input type="checkbox" :checked="this.$store.state.allChecked" @click="allSelect" />全选
</div>
<div style="margin-right:20px;">总价:{{total}}</div>
</div>
</div>
</template>
3、点击复选框选中并同步底部的复选框,点击底部的复选框同步上面的复选框,并加加减减计算价钱
// 是在cart.vue的methods里面写的
// // 点击商品前面的商品的复选框
selectItem(item) {
this.$store.dispatch("SELECT_ITEM", item);
},
// // 点击底部的全选按钮
allSelect() {
this.$store.dispatch("ALLSELECT");
},
// // 减商品
sub(item) {
this.$store.dispatch("SUB_DATA", item);
},
// // 加商品
add(item) {
this.$store.dispatch("ADD_DATA", item);
},
// // 删除商品
del(index) {
this.$store.dispatch("DELETE", index);
}
// 在store里面写的,在action写的
// 点击商品前面的商品的复选框
SELECT_ITEM(context, item) {
context.commit('SELECT_ITEM', item)
},
// 点击底部的全选按钮
ALLSELECT(context) {
context.commit('ALLSELECT')
},
// 减商品
SUB_DATA(context, item) {
context.commit('SUB_DATA', item)
},
// 加商品
ADD_DATA(context, item) {
context.commit('ADD_DATA', item)
},
// 删除数据
DELETE(context, index) {
context.commit('DELETE', index)
}
// 在mutations里面写的
// 点击商品前面的商品的复选框
SELECT_ITEM(state, item) {
item.checked = !item.checked;
var temp = state.cartItem.every(ele => {
return ele.checked == true;
});
state.allChecked = temp;
state.total = 0;
state.cartItem.forEach(ele => {
if (ele.checked) {
state.total += ele.item.salePrice * ele.count;
}
})
localStorage.setItem('cartItems', JSON.stringify(state.cartItem))
},
// 点击底部的全选按钮
ALLSELECT(state) {
state.allChecked = !state.allChecked;
state.cartItem.forEach(ele => {
ele.checked = state.allChecked;
});
state.total = 0;
state.cartItem.forEach(ele => {
if (ele.checked) {
state.total += ele.item.salePrice * ele.count;
}
})
localStorage.setItem('cartItems', JSON.stringify(state.cartItem))
},
// 减商品
SUB_DATA(state, item) {
if (item.count > 1) {
item.count--;
}
state.total = 0;
state.cartItem.forEach(ele => {
if (ele.checked) {
state.total += ele.item.salePrice * ele.count;
}
})
localStorage.setItem('cartItems', JSON.stringify(state.cartItem))
},
// 加商品
ADD_DATA(state, item) {
item.count++;
state.total = 0;
state.cartItem.forEach(ele => {
if (ele.checked) {
state.total += ele.item.salePrice * ele.count;
}
})
localStorage.setItem('cartItems', JSON.stringify(state.cartItem))
},
// 删除数据
DELETE(state, index) {
state.cartItem.splice(index, 1);
state.total = 0;
state.cartItem.forEach(ele => {
if (ele.checked) {
state.total += ele.item.salePrice * ele.count;
}
})
localStorage.setItem('cartItems', JSON.stringify(state.cartItem))
}
以上就是关于使用Vuex实现的购物车功能。
总结:
购物车的逻辑:
1、点击加入购物车的按钮,把当前商品的item通过***this.$store.dispatch('需要触发的action函数',需要传递的参数)
***,传给Vuex的actions
2、在store的index.js文件里,通过组件传来的函数名称,来接受传来的参数,并通过***context.commit('需要触发的Mutation函数',要传的参数)
***,把item这个对象传给mutations
3、在motations里面,判断去重,并保存到本地。
4、从本地取数据,并渲染页面。
5、在组件内让每个商品前面的复选框绑定保存到本地的checked,并给一个点击事件,把当前点击的商品的对象传给store的index.js的actions,actions再把值传给motations,在这里面来改变状态以及同步底部的复选框并对价钱的总价来计算,最后在同步购物车
6、在组件内给底部的复选框绑定定义在state里面的选中状态,默认是不选中,再给一个点击事件,和上面的步骤一样,在组件内传给actions,actions再把方法传给motations,最后再同步state,和本地数据。
7、剩下的数量加加减减和删除和上面的方法一样,最后也需要同步本地数据。
完整的代码: 源码.
更多推荐
所有评论(0)