1.vue小米购物车用到了 Vuex + localstorage，使用了vue2，创建项目用vue create xiaomi （名字）

1.在Home.vue里面写

<template><div class="home"><header><span >首页</span><router-link to="/about" class="span">购物车({{total}})</router-link></header><div class="list" v-for="item in list" :key="item.id"><div class="left"><img data-v-3ebe9018="" :src="item.img"></div><div class="right"><h3 class="title">{{item.name}}</h3><p class="slogan">{{item.slogan}}</p><p class="money">{{item.price}}</p><button class="button" @click="setShippingjiajian(item,'PLUS')">加入购物车</button></div></div></div>
</template><script>
import {mapState,mapGetters} from "vuex"export default {name: 'Home',computed:{...mapState(["list"]),...mapGetters(["total"])},created(){this.$store.dispatch("setList")},methods:{setShippingjiajian(item,_type){console.log(item)this.$store.dispatch("setShippingjiajian",{id:item.id,name:item.name,price:item.price,img:item.img,slogan:item.slogan,// 这个_type是定义加减的_type})}}
}
</script>
<style scoped>.home{width: 100%;}
header{display: flex;justify-content: center;align-items: center;width: 100%;height: 0.44rem;background: #ff6704;color: #fff;font-size: 0.18rem;display: fixed;
}
.span{position: absolute;right: 0.15rem;top: 0.15rem;font-size: 0.14rem;
}
.list{border-bottom: 1px solid #ddd;background: #fff;display: flex;flex-direction: row;
}
.left img{width: 0.94rem;height: 0.94rem;
}
.right{flex: 1;overflow: hidden;height: 1.2rem;padding: 0.1rem 0.1rem 0.1rem 0.13rem;box-sizing: border-box;
}
.title{color: #333;font-size: 0.16rem;
}
.slogan{margin-top: 0.05rem;color: #999;font-size: 0.12rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.money{margin-top: 0.15rem;color: #ff6704;font-size: 0.14rem;
}
.button{float: right;width: 0.8rem;height: 0.2rem;font-size: 0.12rem;border: 1px solid #ff6704;color: #ff6704;border-radius: 0.02rem;background-color: #fff;
}
</style>

2.在About.vue里面写

<template><div class="about"><header><span>购物车</span><router-link to="/" class="span">返回</router-link></header><div class="list" v-for="item in shipping" :key="item.id"><div class="left"><img :src="item.img" alt=""></div><div class="right"><h3 class="title">{{item.name}}</h3><p class="slogan">{{item.slogan}}</p><p class="money">{{item.price}}</p><div class="button"><button class="an" @click="handle(item.id,item.price,'PLUS')">+</button><p class="cen">{{item.mount}}</p><button class="an"  @click="handle(item.id,item.price,'REDUCE')">-</button></div></div></div><div class="footer">总价{{zong}}</div></div>
</template>
<script>
import { mapState , mapActions} from "vuex"export default({computed:{...mapState(["shipping"]),shipping(){return this.$store.state.shipping},zong(){let zongji=0this.shipping.map(v=>{zongji +=(v.mount*v.price)})localStorage.setItem('totalPrice', JSON.stringify(zongji))return zongji}},methods:{...mapActions(['getShipping']),handle(id,price,_type){this.$store.dispatch('setshipping',{id,price,_type})}},mounted(){this.getShipping()}})
</script>
<style scoped>header{display: flex;justify-content: center;align-items: center;width: 100%;height: 0.44rem;background: #ff6704;color: #fff;font-size: 0.18rem;display: fixed;
}
.span{position: absolute;left: 0.15rem;top: 0.15rem;font-size: 0.14rem;
}
.list{border-bottom: 1px solid #ddd;background: #fff;display: flex;flex-direction: row;
}
.left img{width: 0.94rem;height: 0.94rem;
}
.right{flex: 1;overflow: hidden;height: 1.2rem;padding: 0.1rem 0.1rem 0.1rem 0.13rem;box-sizing: border-box;
}
.title{color: #333;font-size: 0.16rem;
}
.slogan{margin-top: 0.05rem;color: #999;font-size: 0.12rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.money{margin-top: 0.15rem;color: #ff6704;font-size: 0.14rem;
}
.button{float: right;width: 0.8rem;height: 0.2rem;font-size: 0.12rem;
}
.an{width: 0.2rem;height: 0.2rem;border: 0.01rem solid #999;border-radius: 50%;font-size: 0.14rem;line-height: 0.08rem;background-color: #fff;float: left;
}
.cen{float: left;width: 0.2rem;height: 0.2rem;border: 1px solid #333;line-height: 0.2rem;text-align: center;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
background-color: #ff6704;
color: white;
height: 0.8rem;
}</style>

3.store目录下的index.js文件里面写

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {list:[],shipping:[],//购物车页},mutations: {// 渲染数SET_LIST(state,data) {state.list=data},//  加入购物车SET_SHipping(state,data){const {id,img,name,price,slogan,_type}=data;const index = state.shipping.findIndex(item=>item.id==id);if(index==-1){state.shipping.push({id,img,name,price,slogan,_type,mount:1,tPrice:price})}else{let item=state.shipping[index];if(_type=='PLUS'){item.mount+=1;item.tPrice+=price;}else if(_type=='REDUCE'){if(item.mount>1){item.mount-=1;item.tPrice-=price;}else{alert("数量不能再减少了")}}}localStorage.setItem('shipping',JSON.stringify(state.shipping));},// 让购物车的数据刷新不掉SET_SHP(state,data) {state.shipping=data},},actions: {setList({commit}){const list=JSON.parse(localStorage.getItem("list"))||[];commit("SET_LIST",list)},setshipping({commit},data){commit("SET_SHipping",data)},getShipping({commit}){const shipping=JSON.parse(localStorage.getItem("shipping"))||[];commit("SET_SHP",shipping)},setShippingjiajian({commit},data){console.log(data)commit("SET_SHipping",data)},},modules: {},// 数量getters:{total(state){
return state.shipping.reduce((pre,item)=>{return pre+item.mount
},0)}}
})

5.list购物车里面的数据

list: [{"id": 1,"name": "小米9 SE","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5652bd7a2f8bd6daaa1dd4b5c3c2e9b3.jpg","price": 1999,"slogan": "新品看点：弹出式肩键｜真实机械感反馈","totalMount": 0,"totolPrice": 0,"num":1},{"id": 2,"name": "Redmi K40 游戏增强版","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg","price": 2999,"slogan": "新品看点：年度旗舰骁龙870，新一代 E4 AMOLED旗舰直屏","totalMount": 0,"totolPrice": 0,"num":1},{"id": 3,"name": "小米9 SE","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5652bd7a2f8bd6daaa1dd4b5c3c2e9b3.jpg","price": 3999,"slogan": "新品看点：弹出式肩键｜真实机械感反馈","totalMount": 0,"totolPrice": 0,"num":1},{"id": 4,"name": "Redmi K40 游戏增强版","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg","price": 4999,"slogan": "新品看点：年度旗舰骁龙870，新一代 E4 AMOLED旗舰直屏","totalMount": 0,"totolPrice": 0,"num":1},{"id": 5,"name": "小米9 SE","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5652bd7a2f8bd6daaa1dd4b5c3c2e9b3.jpg","price": 999,"slogan": "新品看点：弹出式肩键｜真实机械感反馈","totalMount": 0,"totolPrice": 0,"num":1},{"id": 6,"name": "Redmi K40 游戏增强版","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg","price": 2999,"slogan": "新品看点：年度旗舰骁龙870，新一代 E4 AMOLED旗舰直屏","totalMount": 0,"totolPrice": 0,"num":1},{"id": 7,"name": "小米9 SE","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5652bd7a2f8bd6daaa1dd4b5c3c2e9b3.jpg","price": 1999,"slogan": "新品看点：弹出式肩键｜真实机械感反馈","totalMount": 0,"totolPrice": 0,"num":1},{"id": 8,"name": "Redmi K40 游戏增强版","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg","price": 699,"slogan": "新品看点：年度旗舰骁龙870，新一代 E4 AMOLED旗舰直屏","totalMount": 0,"totolPrice": 0,"num":1},{"id": 9,"name": "小米9 SE","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5652bd7a2f8bd6daaa1dd4b5c3c2e9b3.jpg","price": 799,"slogan": "新品看点：弹出式肩键｜真实机械感反馈","totalMount": 0,"totolPrice": 0,"num":1},{"id": 10,"name": "Redmi K40 游戏增强版","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg","price": 1099,"slogan": "新品看点：年度旗舰骁龙870，新一代 E4 AMOLED旗舰直屏","totalMount": 0,"totolPrice": 0,"num":1},{"id": 11,"name": "小米9 SE","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5652bd7a2f8bd6daaa1dd4b5c3c2e9b3.jpg","price": 1199,"slogan": "新品看点：弹出式肩键｜真实机械感反馈","totalMount": 0,"totolPrice": 0,"num":1},{"id": 12,"name": "Redmi K40 游戏增强版","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg","price": 1299,"slogan": "新品看点：年度旗舰骁龙870，新一代 E4 AMOLED旗舰直屏","totalMount": 0,"totolPrice": 0,"num":1},{"id": 13,"name": "小米9 SE","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5652bd7a2f8bd6daaa1dd4b5c3c2e9b3.jpg","price": 1399,"slogan": "新品看点：弹出式肩键｜真实机械感反馈","totalMount": 0,"totolPrice": 0,"num":1},{"id": 14,"name": "Redmi K40 游戏增强版","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg","price": 1499,"slogan": "新品看点：年度旗舰骁龙870，新一代 E4 AMOLED旗舰直屏","totalMount": 0,"totolPrice": 0,"num":1},{"id": 15,"name": "小米9 SE","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5652bd7a2f8bd6daaa1dd4b5c3c2e9b3.jpg","price": 15999,"slogan": "新品看点：弹出式肩键｜真实机械感反馈","totalMount": 0,"totolPrice": 0,"num":1},{"id": 16,"name": "Redmi K40 游戏增强版","img": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg","price": 17999,"slogan": "新品看点：年度旗舰骁龙870，新一代 E4 AMOLED旗舰直屏","totalMount": 0,"totolPrice": 0,"num":1}]

Vue项目小米购物车相关推荐

VUE项目练习大全（附github源码）
vue慢慢的成为了前端最受欢迎的框架之一,在很多项目之中开发都能用得到,如今也已经发展到3.0了,可能是因为这个框架可以提高工作效率,因此受到大家的追捧,在之前的文章里面也说过,2019年,大前端学习 ...
Github上8个很棒的Vue项目
大家好,我是若川.持续组织了近一年的源码共读活动,感兴趣的可以点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列 ...
VUE 项目图标全部替换成阿里巴巴矢量图
我们在做vue项目时,发现vue里的图标不能满足我们项目的需求,我们就需要去阿里巴巴矢量图里下载了. 阿里巴巴矢量图库中有两种格式的图标如下图第一个Unicode 样式,vue的使用方法如下第二个 ...
vue 项目开发 lenovo商城
前言由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户.在初学vue的过程中遇到的一些问题,都是入门时 ...
【Vue项目】二、去哪儿网APP——首页开发
首页开发中的重难点重点思想:页面组件化页面组件化下的组件引入及使用 flex:1 使用iconfont图标使用vue-awesome-swiper实现轮播效果实现带有分页器的轮播实现有分页效 ...
【vue项目实战】如何使用icon图标
一.通过ai将图片生成svg,条件允许最好找ui设计师参考 https://www.jianshu.com/p/d30bc9e83e00 二.如何将svg转换为icon图标 1.进入阿里巴巴图标矢量 ...
Vue项目之登录注册
Vue项目之登录注册 1. 注册 1.1 注册页面的布局 1.2 注册业务逻辑的实现 2. 登录 3.导航守卫 3.1全局导航守卫,全部路由都会经过这里.一定要调用next方法向下执行 3.2 路由独 ...
饿了么（elementUI）组件库如何在vue项目中使用？
官方组件库地址:Element - The world's most popular Vue UI frameworkhttps://element.eleme.cn/#/zh-CN elementu ...
Vue项目引入阿里巴巴矢量图标库
添加图标并下载一.点击图标管理–>我的项目,创建项目简单点~填个项目名即可二.选择一个图标,加入购物车点击右上角购物车的图标,添加至项目(可以直接点击下载代码,不需要创建项目,但是如果是 ...

Vue项目小米购物车

1.vue小米购物车用到了 Vuex + localstorage，使用了vue2，创建项目用vue create xiaomi （名字）

1.在Home.vue里面写

2.在About.vue里面写

3.store目录下的index.js文件里面写

5.list购物车里面的数据

Vue项目小米购物车相关推荐

最新文章

热门文章