<template>
    <div>
        <table>
            <tr>
                <td>商品编号</td>
                <td><input type="text" v-model.number="id"></td>
            </tr>
            <tr>
                <td>商品名称</td>
                <td><input type="text" v-model.number="title"></td>
            </tr>
            <tr>
                <td>商品价格</td>
                <td><input type="text" v-model.number="price"></td>
            </tr>
             <tr>
                <td colspan="2"><button @click="addCart">加入购物车</button></td>
            </tr>
        </table>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>金额</th>
                    <th>操作</th>
                </tr>
            </thead>
        <tbody>
            <tr v-for="book in books" :key="book.id">
                <td>{{ book.id }}</td>
                <td>{{ book.title }}</td>
                <td>{{ book.price }}</td>
                <td><button>-</button> {{ book.count }} <button>+</button>></td>
                <td>金额</td>
                <td><button>删除</button></td>
            </tr>
        </tbody>
        </table>
        <span>总价：￥0.00</span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            id: null,
            title: '',
            price: '',
            quantity: 1
        }
    },
    computed: {
        books() {
            return this.$store.state.items;
        }
    },
    methods: {
        addCart() {
            this.$store.commit('pushItemToCart', {
                id: this.id,
                title: this.title,
                price: this.price,
                count: this.quartity
            })
            this.id = '';
            this.title = '';
            this.price = '';
        }
    }

};
</script>

<template>
  <div>
<table>
  <tr>
    <td>商品编号</td>
    <td><input type="text" v-model.number="id"></td>
  </tr>
  <tr>
    <td>商品名称</td>
    <td><input type="text" v-model="title"></td>
  </tr>
  <tr>
    <td>商品价格</td>
    <td><input type="text" v-model="price"></td>
  </tr>
  <tr>
    <td>数量</td>
    <td><input type="text" v-model.number="quantity"></td>
  </tr>
  <tr>
    <td colspan="2"><button @click="addCart">加入购物车</button></td>
  </tr>
</table>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>商品名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>金额</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="book in books" :key="book.id">
          <td>{{ book.id }}</td>
          <td>{{ book.title }}</td>
          <td>{{ book.price }}</td>
          <td>
            <button :disabled="book.count===0" @click="increment({id: book.id, count: -1})">-</button>
            {{ book.count }}
            <button @click="increment({id: book.id, count: 1})">+</button>
          </td>
          <td>{{ itemPrice(book.id) }}</td>
          <td><button @click="deleteItem(book.id)">删除</button></td>
        </tr>
      </tbody>
    </table>
    <span>总价：￥{{ totalPrice }}</span>
  </div>
</template>

<script>
import { mapMutations, mapState, mapGetters, mapActions } from 'vuex'
export default {
  data(){
    return {
      id: null,
      title: '',
      price: '',
      quantity: 1
    }
  },
  computed: {
    /* books(){
      return this.$store.state.items;
    } */
    ...mapState('cart', {
      books: 'items'
    }),
    ...mapGetters('cart', {
      itemPrice: 'cartItemPrice',
      totalPrice: 'cartTotalPrice'
    })
  },
  methods: {
    ...mapMutations('cart', {
      addItemToCart: 'pushItemToCart',
      increment: 'incrementItemCount'
    }),
    ...mapMutations('cart', [
      'deleteItem'
    ]),
    ...mapActions('cart', [
      'addItemToCart'
    ]),
    addCart(){
      //this.$store.commit('pushItemToCart', {
      /* this.addItemToCart({
        id: this.id,
        title: this.title,
        price: this.price,
        count: this.quantity
      }) */

      //this.$store.dispatch('addItemToCart', {
      this.addItemToCart({
        id: this.id,
        title: this.title,
        price: this.price,
        count: this.quantity
      })
      this.id = '';
      this.title = '';
      this.price = '';
    }
  }
};
</script>

<style scoped>
div {
  width: 800px;
}
table {
  border: 1px solid black;
  width: 100%;
  margin-top: 20px;
}
th {
  height: 50px;
}
th, td {
  border-bottom: 1px solid #ddd;
  text-align: center;
}
span {
  float: right;
}
</style>

为什么数量那里总是出来一个1

<template>
    <div>
        <table>
            <tr>
                <td>商品编号</td>
                <td><input type="text" v-model.number="id"></td>
            </tr>
            <tr>
                <td>商品名称</td>
                <td><input type="text" v-model.number="title"></td>
            </tr>
            <tr>
                <td>商品价格</td>
                <td><input type="text" v-model.number="price"></td>
            </tr>
            <tr>
                <td>数量</td>
                <td><input type="text" v-model.number="quantity"></td>
            </tr>
             <tr>
                <td colspan="2"><button @click="addCart">加入购物车</button></td>
            </tr>
        </table>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>金额</th>
                    <th>操作</th>
                </tr>
            </thead>
        <tbody>
            <tr v-for="book in books" :key="book.id">
                <td>{{ book.id }}</td>
                <td>{{ book.title }}</td>
                <td>{{ book.price }}</td>
                <td><button :disabled="book.count===0" @click="increment({id: book.id, count: -1})">-</button>
                {{ book.count }} 
                <button @click="increment({id: book.id, count: 1})">+</button></td>
                <td>{{ itemPrice(book.id) }}</td>
                <td><button @click="deleteItem(book.id)">删除</button></td>
            </tr>
        </tbody>
        </table>
        <span>总价：￥{{ totalPrice }}</span>
    </div>
</template>

<script>
import { mapMutations, mapState, mapGetters, mapActions } from 'vuex'
export default {
    data() {
        return {
            id: null,
            title: '',
            price: '',
            quantity: ''
        }
    },
    computed: {
        ...mapState('cart', {
            books: 'items'
        }),
        ...mapGetters('cart', {
            itemPrice: 'cartItemPrice',
            totalPrice: 'cartTotalPrice'
        })
    },
    methods: {
        ...mapMutations('cart', {
            addItemToCart: 'pushItemToCart',
            increment: 'incrementItemCount'
        }),
        ...mapMutations('cart', [
            'deleteItem'
        ]),
        ...mapActions('cart', [
            'addItemToCart'
        ]),
        addCart(){
      
      this.addItemToCart({
        id: this.id,
        title: this.title,
        price: this.price,
        count: this.quantity
      })
      this.id = '';
      this.title = '';
      this.price = '';
        }
    }

};
</script>
<style scoped>
div {
  width: 800px;
}
table {
  border: 1px solid black;
  width: 100%;
  margin-top: 20px;
}
th {
  height: 50px;
}
th, td {
  border-bottom: 1px solid #ddd;
  text-align: center;
}
span {
  float: right;
}
</style>