store/index.js
// 导入vue
import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'
import cart from './module/cart'
Vue.use(Vuex)
// 创建仓库store
const store = new Vuex.Store({
strict: true,
modules: {
cart
}
})
// 导出仓库
export default store
store/modules/cart
import request from '@/utils/request'
export default {
namespaced: true,
state: {
// 购物车数据[{},{}]
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, payload) {
// 根据id找到要更新的数据
const goods = state.list.find(item => item.id === payload.id)
// 更新数量
goods.count = payload.count
}
},
actions: {
async getList (context) {
const res = await request.get('/cart')
console.log(res)
context.commit('updateList', res)
},
// 修改数量
/*
请求方式:patch
请求地址:http://localhost:3000/cart/:id
请求参数
{
count:值,
price:值
}
*/
async updateCountAsync (ctx, payload) {
// 修改后端的数据
await request.patch('/cart/' + payload.id, {
count: payload.count
})
// 更新vuex的数据
ctx.commit('updateCount', payload)
}
}
}
App.vue
<template>
<div id="app">
<CartHeader></CartHeader>
<CartItem v-for="item in list" :key="item.id" :item="item"></CartItem>
<CartFooter></CartFooter>
</div>
</template>
<script>
import CartHeader from '@/components/cart-header.vue'
import CartItem from '@/components/cart-item.vue'
import CartFooter from '@/components/cart-footer.vue'
import { mapState } from 'vuex'
export default {
components: {
CartHeader, CartItem, CartFooter
},
created () {
this.$store.dispatch('cart/getList')
},
computed: {
...mapState('cart', ['list'])
}
}
</script>
<style lang="less" scoped>
#app{
padding: 50px 0;
}
</style>
components/cart-header.vue
<template>
<div class="header-container">购物车案例</div>
</template>
<script>
export default {
name: 'CartHeader'
}
</script>
<style lang="less" scoped>
.header-container {
height: 50px;
line-height: 50px;
font-size: 16px;
background-color: #42b983;
text-align: center;
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
</style>
components/cart-item.vue
<template>
<div class="goods-container">
<!-- 左侧图片区域 -->
<div class="left">
<img :src="item.thumb" class="avatar" alt="">
</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(this.item.id, newCount)
this.$store.dispatch('cart/updateCountAsync', { id, count: newCount })
}
}
}
</script>
<style lang="less" scoped>
.goods-container {
display: flex;
padding: 10px;
+.goods-container {
border-top: 1px solid #f8f8f8;
}
.left {
.avatar {
width: 100px;
height: 100px;
}
margin-right: 10px;
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
.title {
font-weight: bold;
}
.info {
display: flex;
justify-content: space-between;
align-items: center;
.price {
color: red;
font-weight: bold;
}
.btns {
.count {
display: inline-block;
width: 30px;
text-align: center;
}
}
}
}
}
.custom-control-label::before,
.custom-control-label::after {
top: 3.6rem;
}
</style>
components/cart-footer.vue
<template>
<div class="footer-container">
<!-- 中间的合计 -->
<div>
<span>共 {{total}}件商品,合计:</span>
<span class="price">¥{{ totalPrice }}</span>
</div>
<!-- 右侧结算按钮 -->
<button class="btn btn-success btn-settle">结算</button>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'CartFooter',
computed: {
...mapGetters('cart', ['total', 'totalPrice'])
}
}
</script>
<style lang="less" scoped>
.footer-container {
background-color: white;
height: 50px;
border-top: 1px solid #f8f8f8;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 10px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 999;
}
.price {
color: red;
font-size: 13px;
font-weight: bold;
margin-right: 10px;
}
.btn-settle {
height: 30px;
min-width: 80px;
margin-right: 20px;
border-radius: 20px;
background: #42b983;
border: none;
color: white;
}
</style>