新建vue项目
此项目需要用到json-server，模拟后台服务器接口功能，
npm i json-server -g安装此包，然后再vue项目的全局根目录中新建db文件夹，其中新建index.json文件。
{
"cart": [
{
"id": 1001,
"name": "低帮城市休闲户外鞋天然牛皮COOLMAX纤维",
"price": 128,
"count": 3,
"thumb": "https://yanxuan-item.nosdn.127.net/3a56a913e687dc2279473e325ea770a9.jpg"
},
{
"id": 1002,
"name": "网易未央黑猪猪肘330g*1袋",
"price": 39,
"count": 3,
"thumb": "https://yanxuan-item.nosdn.127.net/3a56a913e687dc2279473e325ea770a9.jpg"
},
{
"id": 1003,
"name": "KENROLL男女简洁多彩一片室外拖",
"price": 88,
"count": 3,
"thumb": "https://yanxuan-item.nosdn.127.net/3a56a913e687dc2279473e325ea770a9.jpg"
},
{
"id": 1004,
"name": "低帮城市休闲户外鞋天然牛皮COOLMAX纤维",
"price": 99,
"count": 6,
"thumb": "https://yanxuan-item.nosdn.127.net/3a56a913e687dc2279473e325ea770a9.jpg"
}
],
"friends": [
{
"id": 1,
"name": "hang",
"age": 18
},
{
"id": 2,
"name": "wang",
"age": 29
}
]
}模拟数据库，在db文件夹下，调用系统cmd命令，启动模拟服务器
json-server --watch index.json
main.js
import Vue from 'vue'
import App from './App.vue'
import store from "@/store";
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
store
}).$mount('#app');app.vue
<template>
<div id="app">
<!-- Header 区域 -->
<cart-header></cart-header>
<!-- Item 区域 -->
<cart-item v-for="item in list" :key="item.id" :item="item"></cart-item>
<!-- Footer 区域 -->
<cart-footer></cart-footer>
</div>
</template>
<script>
import CartHeader from "@/components/CartHeader";
import CartItem from "@/components/CartItem";
import CartFooter from "@/components/CartFooter";
import { mapState } from 'vuex'
export default {
name: 'App',
components: {
CartHeader,
CartItem,
CartFooter
},
computed:{
...mapState('cart',['list'])
},
created() {
this.$store.dispatch('cart/getList');
}
}
</script>
<style>
*{
padding: 0;
margin: 0;
}
</style>index.js
import Vue from 'vue'
import Vuex from 'vuex'
import cart from "@/store/modules/cart";
Vue.use(Vuex);
const store = new Vuex.Store({
modules:{
cart
}
});
export default store;cart.js
import axios from "axios";
export default {
//开启命名空间
namespaced:true,
state(){
return {
list:[]
}
},
getters:{
//总数
total(state){
return state.list.reduce( (sum,item) => sum += item.count,0);
},
//总金额
totalPrice(state){
return state.list.reduce( (sum,item) => sum + item.count * item.price ,0);
}
},
mutations:{
updateList(state,newList){
state.list = newList;
},
//
updateCount(state,obj){
//根据id找到对应的对象，更新count属性
const goods = state.list.find( item => item.id === obj.id);
goods.count = obj.newCount;
}
},
actions:{
//请求方式 get
//请求地址：http://localhost:3000/cart
async getList(context){
const res = await axios.get('http://localhost:3000/cart');
//console.log(res);
context.commit('updateList',res.data);
},
//请求方式 patch
//请求地址：http://localhost:3000/cart/:id值
//请求参数 { name:'新值', [可选]}
//
async updateCountAsync(context,obj){
//将修改更新同步到后台服务器
const res = await axios.patch(`http://localhost:3000/cart/${obj.id}`,{
count: obj.newCount
});
console.log(res);
//调用mutation
context.commit('updateCount',{
id: obj.id,
newCount: obj.newCount
});
}
}
}CartHeader.vue
<template>
<div class="cart-header">
<div class="title">购物车案例</div>
</div>
</template>
<script>
export default {
name: "CartHeader"
}
</script>
<style scoped>
.cart-header{
width: 100%;
height: 70px;
background-color: mediumseagreen;
margin-bottom: 10px;
}
.cart-header .title{
color: white;
font-size: 34px;
width: 200px;
height: 100%;
line-height: 70px;
text-align: center;
margin: 0 auto;
}
</style>CartItem.vue
<template>
<div class="cart-item">
<!-- 左侧图片区域 -->
<div class="left">
<img :src="item.thumb" alt="" class="avatar">
</div>
<!-- 右侧商品区域 -->
<div class="right">
<!-- 标题 -->
<div class="title">{{ item.name }}</div>
<div class="info">
<span class="price">￥{{ item.price }}</span>
<div class="btns">
<!-- 按钮区域 -->
<button class="btn btn-light" @click="btnClick(-1)">-</button>
<span class="count">{{ item.count }}</span>
<button class="btn btn-light" @click="btnClick(+1)">+</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CartItem",
props:{
item: {
type: Object,
required:true
}
},
methods:{
btnClick(step){
const newCount = this.item.count + step;
const id = this.item.id;
//console.log(id,newCount);
if(newCount < 1) return;
this.$store.dispatch('cart/updateCountAsync',{
id,
newCount,
});
}
}
}
</script>
<style scoped>
.cart-item{
width: 98%;
height: 200px;
margin-left: 2%;
}
.cart-item .left{
width: 180px;
height: 180px;
float: left;
}
.left img{
width: 100%;
height: 100%;
}
.cart-item .right{
width: 30%;
height: 100%;
float: left;
}
.right .title{
text-indent: 40px;
font-size: 24px;
height: 75%;
font-family: Arial,"Arial Black",Georgia;
}
.right .info{
width: 100%;
height: 25%;
line-height: 30px;
}
.right .price{
padding: 3px;
margin-left: 40px;
color: orange;
font-size: 24px;
}
.right .btns{
float: right;
}
.btns .btn{
width: 30px;
height: 33px;
line-height: 30px;
font-size: 20px;
margin: 0 15px;
}
.btns .count{
display: inline-block;
width: 25px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
.btns .btn-light{
background-color: #cccccc;
}
</style>CartFooter.vue
<template>
<div class="cart-footer">
<!-- 中间合计 -->
<div>
<span>共 {{ total }} 件商品，合计：</span>
<span class="price">￥ {{ totalPrice }}</span>
</div>
<!-- 右侧结算按钮 -->
<button class="btn">结算</button>
</div>
</template>
<script>
import { mapGetters} from 'vuex'
export default {
name: "CartFooter",
computed:{
...mapGetters('cart',['total','totalPrice'])
}
}
</script>
<style scoped>
.cart-footer{
width: 30%;
height: 50px;
font-size: 20px;
float: right;
}
.cart-footer div{
display: inline;
width: 400px;
margin-left: 8%;
}
.cart-footer .price{
font-size: 30px;
font-weight: bold;
color: red;
}
.cart-footer .btn{
width: 150px;
height: 50px;
background-color: mediumseagreen;
border-radius: 30px;
float: right;
margin-right: 40px;
}
</style>