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()]
});
```

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
})

//加入购物车的功能//添加购物车（添加的商品）
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';

<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:{//点击添加进购物车按钮  触发此方法  发布订阅  添加指定图书进购物车Car.vue
     addCart(book){this.$store.commit(Types.ADD_CART,book)}
}}</script>

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;

<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'// 辅助函数 语法糖import {mapState,mapGetters} from 'vuex';export default {data(){return {msg: 'hello'}},created(){},filters:{//过滤器
          numFilter(value) {//截取当前数据到小数点后两位let realVal=Number(value).toFixed(2);return Number(realVal);}},methods: {addCart(l){//当触发此事件是同样也是提交给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}}

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;//还要更新掉原数组  否则不会刷新state.cartList=[...state.cartList];}else {book.bookCount=1;//用新数组替换到老数组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;//还要更新掉原数组  否则不会刷新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=[];}
}

<template><div class="item-wrapper"><div class='item'>总数：<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'//两个辅助函数import {mapState,mapGetters} from 'vuex';export default {data(){return {}},filters:{numFilter(value) {//截取当前数据到小数点后两位let realVal=Number(value).toFixed(2);return Number(realVal);}},methods:{clearAll(){this.$store.commit(Types.CLEAR_CART); }},computed:{...mapGetters(['count']),...mapGetters(['totalPrice'])}}

let getters={
//求购物车中所有商品的总数量
//迭代相加  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;