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=" 80px;display: inline-block;"><input type="checkbox" v-model="isChecked">&nbsp;&nbsp;&nbsp;{{data.name}}</span>
        <span style=" 120px;display: inline-block;">￥: &nbsp;{{data.price}}元</span>
        <span style=" 120px;display: inline-block;">销量: &nbsp;{{data.sales}}件</span>
        <span style=" 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)
    }
  }

})