前端Vue学习之购物车项目实践记录实用指南-45看点

平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“前端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代码如下所示：

当个书本组件代码如下所示：Cart.vue

总计组件代码如下所示：TotalPrice.vue

项目中需用到axios、less、vuex。

总结

最后轻松收个尾：前端vue购物车逻辑这类实现要先理清数据流、状态变化和边界情况。把核心流程跑稳，再补齐异常处理和体验细节，后续维护会轻松很多。