這個小demo具有添加商品進購物車 、增加購物車內商品的數(shù)量、減少購物車內商品的數(shù)量、計算一類商品的總價、以及計算所有商品的總價

首先看目錄結構

?

?因為我們的Tab.vue? Car.vue 以及Carinfo.vue中的數(shù)據(jù)有關聯(lián)? ?所以用到了vuex

在store文件夾下的index.js中```

import Vue from 'vue'; import Vuex from 'vuex'; import logger from 'vuex/dist/logger'; Vue.use(Vuex);// 狀態(tài)
//state里面存放的數(shù)據(jù)是cartList 這個cartList數(shù)據(jù)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: '<App/>',store })

?

在store文件夾下的manutations-types.js文件

//加入購物車的功能//添加購物車（添加的商品） export const ADD_CART='ADD_CART'; //刪除購物車(要求傳入id) export const REMOVE_CART='REMOVE_CART'; //更改商品數(shù)量({id,1/-1}) export const CHANGE_COUNT='CHANGE_COUNT'; //清空購物車 export const CLEAR_CART='CLEAR_CART';

?

List.vue組件

<template><div><MHeader>列表頁</MHeader><div class="content" ref="scroll" @scroll="loadMore"><ul><router-link v-for="(book,index) in books" :key="index" :to="{name:'detail',params:{bid:book.bookId}}" tag="li"><img v-lazy="book.bookCover"><div><h4>{{book.bookName}}</h4><p>{{book.bookInfo}}</p><b>{{book.bookPrice}}</b><div class="btn-list"><button @click.stop="remove(book.bookId)">刪除</button><button @click.stop="addCart(book)">添加進購物車</button></div></div></router-link></ul><div @click="More" class="More">加載更多</div></div></div> </template><script>import * as Types from '../store/mutations-types.js'export default {methods:{//點擊添加進購物車按鈕 觸發(fā)此方法 發(fā)布訂閱 添加指定圖書進購物車Car.vue addCart(book){this.$store.commit(Types.ADD_CART,book)} }}</script>

?

在store文件夾下的manutations.js文件內容? 添加指定商品進購物車

import * as Types from './mutations-types.js'; const mutations={//添加商品進購物車 [Types.ADD_CART](state,book) {//book是添加的一本書 如果有這本書 累加的是數(shù)量 如果沒有那么數(shù)量為1 放到cartList中//查找cartList里面有沒有添加進來的那本書let product=state.cartList.find(item=>item.bookId===book.bookId);//如果有的話if(product) {product.bookCount+=1;//還要更新掉原數(shù)組 原數(shù)組里面有book內容和book 否則不會刷新state.cartList=[...state.cartList];}else {book.bookCount=1;//用新數(shù)組替換到老數(shù)組state.cartList=[...state.cartList,book]}} }export default mutations;

Car.vue組件

<template><div><MHeader>購物車</MHeader><ul class="content"><li v-for="(l,index) in cartList" :key="index"><img :src="l.bookCover" alt="" style="width:120px;height:140px"><div class="right"><h3>{{l.bookName}}</h3><button @click="delOneCart(l)">-</button><span>{{l.bookCount}}</span><button @click="addCart(l)">+</button>
　　　　　　
　　　　　　//計算此類商品的價錢
<p>小計 :￥{{l.bookPrice*l.bookCount | numFilter}}</p><button @click="delCart(l)">刪除</button></div></li></ul><Carinfo></Carinfo></div> </template> <script>import MHeader from '../base/MHeader.vue';import Carinfo from './Carinfo.vue';import * as Types from '../store/mutations-types.js'// 輔助函數(shù) 語法糖import {mapState,mapGetters} from 'vuex';export default {data(){return {msg: 'hello'}},created(){},filters:{//過濾器 numFilter(value) {//截取當前數(shù)據(jù)到小數(shù)點后兩位let realVal=Number(value).toFixed(2);return Number(realVal);}},methods: {addCart(l){//當觸發(fā)此事件是同樣也是提交給manutationsthis.$store.commit(Types.ADD_CART,l)},delOneCart(l){this.$store.commit(Types.CHANGE_COUNT,l);},delCart(l){this.$store.commit(Types.REMOVE_CART,l);}},computed: {...mapGetters(['count','totolPrice']),...mapState(['cartList'])/*cartList(){return this.$store.state.cartList}*/},components: {MHeader,Carinfo}}

manutaions.js

import * as Types from './mutations-types.js'; const mutations={[Types.ADD_CART](state,book) {//book是添加的一本書 如果有這本書 累加的是數(shù)量 如果沒有那么數(shù)量為1 放到cartList中//查找cartList里面有沒有添加進來的那本書let product=state.cartList.find(item=>item.bookId===book.bookId);//如果有的話if(product) {product.bookCount+=1;//還要更新掉原數(shù)組 否則不會刷新state.cartList=[...state.cartList];}else {book.bookCount=1;//用新數(shù)組替換到老數(shù)組state.cartList=[...state.cartList,book]}console.log('state.cartList',state.cartList);},[Types.CHANGE_COUNT](state,book) {let product=state.cartList.find(item=>item.bookId===book.bookId);if(product) {product.bookCount-=1;//還要更新掉原數(shù)組 否則不會刷新state.cartList=[...state.cartList];}},[Types.REMOVE_CART](state,book){state.cartList.forEach((item,i) => {if(item.bookId===book.bookId){state.cartList.splice(i,1);}});state.cartList=[...state.cartList];},[Types.CLEAR_CART](state){state.cartList=[];} }
export default mutations; ?

?

Carinfo.vue

<template><div class="item-wrapper"><div class='item'>總數(shù)：<strong>{{count}}</strong></div><div class='item'>總價：￥<strong>{{totalPrice|numFilter}}</strong></div><button class="item btn btn-danger" @click="clearAll">清空購物車</button></div> </template> <script>import * as Types from '../store/mutations-types.js'//兩個輔助函數(shù)import {mapState,mapGetters} from 'vuex';export default {data(){return {}},filters:{numFilter(value) {//截取當前數(shù)據(jù)到小數(shù)點后兩位let realVal=Number(value).toFixed(2);return Number(realVal);}},methods:{clearAll(){this.$store.commit(Types.CLEAR_CART); }},computed:{...mapGetters(['count']),...mapGetters(['totalPrice'])}}

?

Getter.js

let getters={ //求購物車中所有商品的總數(shù)量 //迭代相加 reducecount:(state)=>state.cartList.reduce((prev,next)=>prev+next.bookCount,0),totalPrice:(state)=>state.cartList.reduce((prev,next)=>prev+next.bookCount*next.bookPrice,0) }export default getters;

?

轉載于:https://www.cnblogs.com/cmy1996/p/9151528.html

總結

以上是生活随笔為你收集整理的用Vue来实现购物车功能（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。