使用vuex让购物车联动

在这里插入图片描述

// 1.vuex点击加减触发函数提交仓库把我们请求的数据存到仓库
2.在仓库定义这个函数和对象把我们存进去的数据存起来
// 3。在我们需要的页面拿出数据，然后循环就可以
// 4.当我们点击加号就触发函数然后在vuex对这个数据进行处理
// 5.对我们点进来的数据进行一个对右边的循环我们只要判断他是否》0，如果是大于0就push到新的数组
6.然后拿到新的数组渲染到购物车里面

这个是goods页面就是整体的页面 asidelist: [], 是左边要渲染的数据定义
rightlist: [],就是右边要渲染的数组

<template><div class="box"><!-- 左边 --><div class="leftbox"><van-sidebar v-model="activeKey"><van-sidebar-item@click="onChange"v-for="(v,i) in asidelist":title="v.name":key="i":id="'cate' +i"/></van-sidebar></div><!-- 右边 --><div class="rightbox"><div><div v-for="(v,i) in rightlist" :key="i" :id="'list' +i"><h3>{{v.name}}</h3><van-cardv-for="(v2,i2) in v.foods":key="i2":num="v2.num":price="v2.price":desc="v2.goodsDesc":title="v2.name":thumb="v2.imgUrl"><template #tags><van-tag plain type="danger">标签</van-tag><van-tag plain type="danger">标签</van-tag></template><template #footer><van-stepper@change="changecate"v-model="v2.num"theme="round"button-size="16"min="0"disable-input/></template></van-card></div></div></div></div>
</template>
<script>
import { goodsList } from "@/api/account.api";
import BScroll from "@better-scroll/core";
import { mapState, mapMutations } from "vuex";
export default {data() {return {activeKey: 0,bs: {},bsr: {}};},// 点击左边跳转到右边的节点methods: {onChange(i) {this.bsr.scrollToElement("#list" + i, 300);},// 4.当我们点击加号就触发函数然后在vuex对这个数据进行处理changecate() {this.$store.commit("changecate");}},async created() {// 页面初始化的时候把他提交给仓库，提交仓库要用commit去提交仓库里面去定义一个数组console.log(this.rightlist);const res = await goodsList();res.data.data.forEach(v => {v.foods.forEach(v2 => {v2.num = 0;});});// 1.vuex点击加减触发函数提交仓库把我们请求的数据存到仓库this.$store.commit("addlist", res.data.data);// 获取两个左右边的父节点this.$nextTick(() => {this.bs = new BScroll(".leftbox", {probeType: 3,click: true});this.bsr = new BScroll(".rightbox", {probeType: 3,click: true});// 拿到我们初始值的右边所有商品列表把他放到一个数组里面let arr = [];this.rightlist.forEach((v, i) => {arr.push(document.querySelector("#list" + i).offsetTop -document.querySelector("#list0").offsetTop);});// 给右边添加滚动事件this.bsr.on("scroll", v => {let y = Math.abs(v.y);for (let i = 0; i < arr.length; i++) {if (y >= arr[i] && y < arr[i + 1]) {this.activeKey = i;this.bs.scrollToElement("#cate" + i, 300);break;}}});});},// 3。在我们需要的页面拿出数据，然后循环就可以computed: {...mapState(["rightlist"]),asidelist() {return this.rightlist;}}
};
</script>
<style lang="scss" scoped>
h3 {color: black;font-size: 14px;height: 4vh;line-height: 4vh;width: 100%;background-color: rgb(218, 209, 209);text-indent: 1em;
}
.box {display: flex;flex-direction: row;.leftbox {// width: 100px;overflow-y: hidden;background-color: f7f8fa;margin-bottom: 50px;}.rightbox {height: 100vh;flex: 1;margin-bottom: 100px;overflow-y: hidden;// background-color: antiquewhite;}
}
</style>...............................................
下面是vuex的代码
import Vue from "vue";
import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({namespaced: true,state: {asidelist: [],rightlist: [],},mutations: {// 2.在仓库定义这个函数和对象  把我们存进去的数据存起来addlist(state, payload) {state.rightlist = payload;},// 5.对我们点进来的数据进行一个对右边的循环我们只要判断他是否》0，如果是大于0就push到新的数组changecate(state, payload) {let arr = [];state.rightlist.forEach((v) => {v.foods.forEach((v2) => {console.log(v2.num);if (v2.num > 0) {arr.push(v2);console.log(v2);}});});state.asidelist = arr;},},getters: {},actions: {},modules: {},
});
。。。。。。。。。。。。。。。。。。。。。。。。。。。这个是我们下面 那个 购物车的代码
<template><div class="cart"><!-- 购物车显示条 --><div class="cartbar"><div class="concat"><van-icon name="smile-o" />联系商家</div><div class="cartico"><van-badge v-if="asidelist.length>0" :content="asidelist.length"><van-icon name="shopping-cart" @click="show = !show" /></van-badge><van-icon v-else name="shopping-cart" class="cartico-off" /><div class="price"><strong>￥{{tatol}}</strong><span>{{asidelist.num}}</span></div></div><div v-if="asidelist.length>0" class="delivery delivery-on">去结算</div><div v-else class="delivery">￥20元起送</div></div><!-- 购物车列表 --><van-popup v-model="show" round position="bottom" :style="{ height: '30%' }"><h1>新用户下单立减39元</h1><div class="clear"><span>购物车</span><span><van-icon name="delete-o" />清空购物车</span></div><ul><li class="box" v-for="(v,i) in asidelist" :key="i"><span class="titeles">{{v.goodsDesc}}</span><span>￥{{v.price*v.num}}</span><van-stepper v-model="v.num" min="0" /></li></ul></van-popup></div>
</template>
<script>
import { mapState } from "vuex";
import { reactive } from "vue";
export default {data() {return {show: false,value: 0};},created() {},computed: {...mapState(["asidelist"]),tatol() {let sum = 0;this.asidelist.forEach(v => {sum += v.price * v.num;});return sum;}}
};
</script><style lang="scss" scoped>
.box {display: flex;justify-content: space-between;.titeles {display: block;overflow: hidden; //隐藏文字text-overflow: ellipsis; //显示 ...white-space: nowrap; //不换行width: 150px;}
}
.clear {display: flex;justify-content: space-between;
}
h1 {height: 30px;line-height: 30px;text-align: center;width: 100%;background-color: #ffcc30;
}
.cart {position: fixed;left: 0;bottom: 0;
}.cartbar {z-index: 9999;position: fixed;// left: 2%;bottom: 10px;width: 88%;height: 70px;display: flex;color: #999;.concat {background: #222;width: 65px;font-size: 12px;text-align: center;padding-top: 10px;border-radius: 35px 0 0 35px;margin-right: 3px;.van-icon {font-size: 30px;display: block;}}.cartico {width: 1px;flex-grow: 1;background: #222;display: flex;.van-badge__wrapper {width: 50px;height: 50px;background: #ff0;font-size: 36px;line-height: 50px;text-align: center;border-radius: 30px;margin: 10px 7px;:deep(.van-badge--fixed) {top: 7px;right: 5px;}.van-icon {color: #000;}}.cartico-off {width: 56px;height: 56px;background: #333;font-size: 40px;line-height: 56px;text-align: center;border-radius: 30px;margin: 7px;}.price {width: 1px;flex-grow: 1;font-size: 12px;padding-top: 14px;strong {display: block;color: #fff;font-size: 20px;}}}.delivery {width: 70px;background: #222;font-size: 12px;line-height: 70px;border-radius: 0 35px 35px 0;text-align: center;}.delivery-on {background: #ff0;font-size: 14px;color: #000;}
}
</style>