vuex实现购物车功能

购物车功能描述：

1. 点击+，-按钮，“已选：xx件”随之增减

2. checkbox选中时，当前项的已选数量增加到头部“已选择xx件”中，未选中时数量不计入

代码：

服务端 node+koa+koa-router

server.js

 const koa = require('koa')
 const router = require('koa-router')

 let server = new koa()
 server.listen(8081)

 server.use(async (ctx, next) => {
   ctx.set('Access-Control-Allow-Origin', '*')

   await next()
 })

 let r = router()

 r.get('/list', async ctx => {
   ctx.body = [{
       name: 'aa',
       price: 358,
       sales: 8531
     },
     {
       name: 'bb',
       price: 18,
       sales: 915
     },
     {
       name: 'cc',
       price: 857,
       sales: 28732
     },
     {
       name: 'dd',
       price: 3,
       sales: 5
     },
     {
       name: 'ee',
       price: 67,
       sales: 900
     }
   ]
 })

 server.use(r.routes())

web端 vue+vuex+fetch

src/components/List.vue

 <template>
   <div class="list">
     <div>已选择 {{state.count}} 件</div>
     <ul>
       <ListItem v-for="(item,index) in items" :key="index" :data="item"/>
     </ul>
   </div>
 </template>
 <script>
 import ListItem from 'components/ListItem'
 export default {
   name: 'List',
   data() {
     return {
       items: [],
       state: this.$store.state
     }
   },
   components: {
     ListItem
   },
   mounted() {
     this.getData()
   },
   methods: {
     async getData() {
       this.items = await (await fetch('http://localhost:8081/list')).json()
     }
   }
 }

 </script>

src/components/ListItem.vue

 <template>
     <div class="list-item">
       <li>
         <span style="width: 80px;display: inline-block;"><input type="checkbox" v-model="isChecked">&nbsp;&nbsp;&nbsp;{{data.name}}</span>
         <span style="width: 120px;display: inline-block;">￥: &nbsp;{{data.price}}元</span>
         <span style="width: 120px;display: inline-block;">销量: &nbsp;{{data.sales}}件</span>
         <span style="width: 120px;display: inline-block;">已选: &nbsp;{{currentCount}}件</span>
         <button @click="addOne">+</button>&nbsp;&nbsp;&nbsp;&nbsp;
         <button @click="minusOne">-</button>
       </li>
     </div>
   </template>
 <script>
 export default {
   name: 'ListItem',
   data() {
     return {
       data: {},
       isChecked: false,
       currentCount: 1
     }
   },
   created() {
     this.data = this.$attrs.data
   },
   methods: {
     addOne() {
       this.currentCount++
       if (this.isChecked) {
         this.$store.dispatch('add', 1)
       }
     },
     minusOne() {
       if (this.currentCount <= 0) return
       this.currentCount--
       if (this.isChecked) {
         this.$store.dispatch('minus', 1)
       }
     }
   },
   watch: {
     isChecked() {
       if (this.isChecked) {
         this.$store.dispatch('add', this.currentCount)
       } else {
         this.$store.dispatch('minus', this.currentCount)
       }
     }
   }
 }

 </script>

src/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'

 Vue.use(Vuex)

 export default new Vuex.Store({
   strict: true,
   state: {
     count: 0
   },
   mutations: {
     add(state, arg) {
       state.count += arg
     },
     minus(state, arg) {
       if (state.count <= 0) {
         return false
       }
       state.count -= arg
     }
   },
   actions: {
     add({ commit }, arg) {
       commit('add', arg)
     },
     minus({ commit }, arg) {
       commit('minus', arg)
     }
   }

 })