平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“前端Vue学习之购物车项目实践记录”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。
1. json-server，生成后端接口
在这个场景下，全局安装json-server，json-server官网为：json-server
npm install json-server -g
// 全局安装
在这个场景下，安装之后启动可能存在json-server与node版本不兼容导致的问题，为此，建议指定一个json-sever版本。
在这个场景下，需准备一个json文件，然后在json文件中写入json数据，借助json-server，就能够完成增删改查功能。
{
"books":[
{"id":1,"bookName":"三国演义","price":23},
{"id":2,"bookName":"西游记","price":43},
{"id":3,"bookName":"水浒传","price":33}
]
}
在这个json文件的目录下执行下述命令，
2. 购物车项目 - 实现效果
从实现思路看，就是更改对应书本的购买数量，下面显示共计多少本书，以及需多少钱实时更新。界面上构建了两个组件，分别为单个书本组件和下面总计组件。状态控制采用vuex.store来进行管理。
3. 参考代码 - Vuex
在这个场景下，采用模块化对这个界面需用到store进行封装，命名为books.js，代码如下所示：
import axios from 'axios'
const state = {
books2:[]
};
const mutations = {
updateBooks(state,newBooks){
state.books2 = newBooks;
},
updateCount(state,obj){
const book = state.books2.find(item => item.id == obj.id);
book.count = obj.newCount;
}
};
const actions = {
async getBooks(context){
const res = await axios.get('http://localhost:3000/books');
context.commit('updateBooks',res.data);
},
async updateBooks(context,obj){
await axios.patch(`http://localhost:3000/books/${obj.id}`,{
count:obj.newCount
})
// 后台修改数据
context.commit('updateCount',{
id:obj.id,
newCount:obj.newCount
});
// 前端页面显示
}
};
const getters = {
totalCount(state) {
return state.books2.reduce((sum, item) => sum + item.count,0);
},
totalPrice(state) {
return state.books2.reduce((sum, item) => sum + item.count * item.price,0);
}
};
export default {
namespaced:true,
state,
mutations,
actions,
getters
}
在store目录下index.js文件引入这个模块即可。
import books from './modules/books'
export default new Vuex.Store({
...,
modules:{
books
}
})
App.vue代码如下所示：
<template>
<div id="app">
<ul>
<li v-for="item in books2" :key="item.id" class="sp">
<Cart :item="item"></Cart>
</li>
</ul>
<TotalPrice class="total-price-position"></TotalPrice>
</div>
</template>
<script>
import {mapState} from 'vuex'
import Cart from './components/Cart.vue';
import TotalPrice from './components/TotalPrice.vue';
export default {
name: 'App',
components: {
Cart,TotalPrice
},
async created(){
this.$store.dispatch('books/getBooks');
},
computed:{
...mapState('books',['books2'])
}
}
</script>
<style lang="less" scoped>
#app{
position: relative;
width: 100%;
height: 700px;
.total-price-position{
position: absolute;
bottom: 0;
left: 0;
}
}
.sp{
height: 100px;
margin-top: 5px;
border-bottom: 1px solid yellow;
}
</style>
当个书本组件代码如下所示：Cart.vue
<template>
<div class="sp-item">
<!-- <img :src="require('@/static/'+item.bookName+'.png')" alt=""> -->
<img src="@/static/水浒传.png" alt="">
<p class="sp-name">{{item.bookName}}</p>
<p class="sp-price">￥{{item.price}}</p>
<div class="sp-btn">
<button class="sp-l-btn" @click="btnClick(-1)">-</button>
<p class="sp-count">{{item.count}}</p>
<button class="sp-r-btn" @click="btnClick(1)">+</button>
</div>
</div>
</template>
<script>
export default {
name:'Cart',
props:{
item:Object
},
methods:{
btnClick(step){
const newCount = this.item.count + step;
const id = this.item.id;
if(newCount < 1)
return
this.$store.dispatch('books/updateBooks',{
id,
newCount
})
}
}
}
</script>
<style lang="less" scoped>
.sp-item{
width: 100%;
height: 100%;
position: relative;
>*{
position: absolute;
}
img{
width: 100px;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.sp-name{
top: 6px;
left: 104px;
font-size: 18px;
}
.sp-price{
bottom: 4px;
left: 104px;
color: red;
font-weight: 600;
}
.sp-btn{
bottom: 4px;
right: 2px;
>*{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
}
}
</style>
总计组件代码如下所示：TotalPrice.vue
<template>
<div class="total-price-div">
<span class="z-span"></span>
共<span>{{totalCount}}</span>本，总共<span class="total-price">{{totalPrice}}</span>元
<button>结算</button>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
name:"TotalPrice",
computed:{
...mapGetters('books',['totalCount','totalPrice'])
}
}
</script>
<style scoped lang="less">
.total-price-div{
height: 60px;
width: 100%;
line-height: 60px;
padding: 2px;
background-color: #e1dcdc;
}
.total-price{
color: red;
}
.z-span{
width: 146px;
display: inline-block;
}
button{
color: white;
background-color: green;
border-radius: 6px;
width: 60px;
height: 40px;
line-height: 40px;
}
</style>
项目中需用到axios、less、vuex。
总结
最后轻松收个尾：前端vue购物车逻辑这类实现要先理清数据流、状态变化和边界情况。把核心流程跑稳，再补齐异常处理和体验细节，后续维护会轻松很多。