这个小demo具有添加商品进购物车 、增加购物车内商品的数量、减少购物车内商品的数量、计算一类商品的总价、以及计算所有商品的总价
首先看目录结构
因为我们的Tab.vue Car.vue 以及Carinfo.vue中的数据有关联 所以用到了vuex
在store文件夹下的index.js中```
import Vue from 'vue'; import Vuex from 'vuex'; import logger from 'vuex/dist/logger'; Vue.use(Vuex); // 状态
//state里面存放的数据是cartList 这个cartList数据manuations和getter都能用到
let state = {cartList:[]}; import mutations from './mutations.js'; import getters from './getters.js' export default new Vuex.Store({ state, mutations, getters, strict:true, plugins:[logger()] }); ```
在main.js里面引入store文件夹下的index.js
main.js文件内容
import Vue from 'vue' import App from './App' import router from './router' //购物车 import store from './store' /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '', store })
在store文件夹下的manutations-types.js文件
//加入购物车的功能 //添加购物车（添加的商品） export const ADD_CART='ADD_CART'; //删除购物车(要求传入id) export const REMOVE_CART='REMOVE_CART'; //更改商品数量({id,1/-1}) export const CHANGE_COUNT='CHANGE_COUNT'; //清空购物车 export const CLEAR_CART='CLEAR_CART';
List.vue组件
列表页
for="(book,index) in books" :key="index" :to="{name:'detail',params:{bid:book.bookId}}" tag="li"> ![]()
{{book.bookName}}
{{book.bookInfo}}
{{book.bookPrice}}加载更多
在store文件夹下的manutations.js文件内容 添加指定商品进购物车
import * as Types from './mutations-types.js'; const mutations={ //添加商品进购物车 [Types.ADD_CART](state,book) { //book是添加的一本书 如果有这本书 累加的是数量 如果没有那么数量为1 放到cartList中 //查找cartList里面有没有添加进来的那本书 let product=state.cartList.find(item=>item.bookId===book.bookId); //如果有的话 if(product) { product.bookCount+=1; //还要更新掉原数组 原数组里面有book内容和book 否则不会刷新 state.cartList=[...state.cartList]; }else { book.bookCount=1; //用新数组替换到老数组 state.cartList=[...state.cartList,book] } } } export default mutations;
Car.vue组件
购物车
- for="(l,index) in cartList" :key="index">
![]()
{{l.bookName}}
{{l.bookCount}}
//计算此类商品的价钱
小计 :￥{{l.bookPrice*l.bookCount | numFilter}}