一、 购物车的实现原理:
注意:在写购物车之前,我们需要知道vuex里的方法如何使用,若是不太清除方法的使用,可以看我之前的文章,其中有一章是介绍vuex的方法的使用和调用的!
1,首先,我们需要一个json数据,自己写或者找一个就可以。
2. 然后把数据渲染到页面,即为商品列表,在每一个商品后面加上一个加号,代表着点击添加商品就将该商品添加到购物车。
3. 其次,就是购物车内的操作,在此之前需要把数据存储到本地,好在购物车页面渲染点击获取的数据。
4. 最后,就是对数据进行全选,单选,加加减减及总价的操作。
二、购物车的具体操作
1、store文件中的index.js代码(即vuex操作)
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
//引入axios,需要下载
Vue.use(Vuex)
export default new Vuex.Store({
state: {
cartlist: [],//用于商品列表渲染的数据
cartItem: JSON.parse(localStorage.getItem("carto")) || [],//存储到localStorage(本地存储),的数组
delchecked: JSON.parse(localStorage.getItem("carto")) || false,
//同步的全选的状态
zong:JSON.parse(localStorage.getItem("zong")) ||0,
//总价
dan:JSON.parse(localStorage.getItem("dan")) ||0,
//总件数
},
mutations: {
//用于商品列表
CARTLIST(state, item) {
state.cartlist = item
},
//用于本地存储并进行去重操作
CARTITEM(state, item) {
var flg = false;
state.cartItem.forEach(e => {
if (e._id === item._id) {
e.count++;
flg = true;
}
});
if (!flg) {
item.count = 1;
item.checked = false;
state.cartItem.push(item)
}
localStorage.setItem("carto", JSON.stringify(state.cartItem))
},
//判断单选是否全选,同步全选
ONCHANGE(state, item) {
console.log(state.cartItem[0].checked)
console.log(item);
state.cartItem.forEach(e => {
if (e._id === item.id) {
//判断是否是选中的那个元素
e.checked = item.checked;
//改变存储中的checked的状态
}
});
//同步全选状态
state.delchecked = state.cartItem.every(e => {
return e.checked