在电商项目当中，都会有购物车的功能，购物车一般都有，加入购物车并保存本地（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、剩下的数量加加减减和删除和上面的方法一样，最后也需要同步本地数据。
完整的代码: 源码.
1145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
