购物车，数量的增减

还没体现

import {
    createStore } from 'vuex'
import books from '@/data/books.js'

const store = createStore({
   
    state() {
   
        return {
   
            items: books 
        }
    },
    mutations: {
   
        pushItemToCart (state, book) {
   
            state.items.push(book);
        },
    deleteItem(state, id) {
   
        let index = state.items.findIndex(item => item.id ===id);
        if(index >= 0) {
   
            state.items.splice(index, 1)
        }
    },
    incrementItemCount(state, {
   id, count}) {
   
        let item = state.items.find(item => item.id === id);
        if(item) {
   
            item.count += count;
        }
    }
    },
    getters: {
   
        cartItemPrice(state) {
   
            return function(id) {
   
                let item = state.items.find(item => item.id === id);
                if(item) {
   
                    return item.price * item.count;
                }
            }
        },
        cartTotalPrice(state) {
   
            return state.items.reduce((total, item) => {
   
                return total + item.price * item.count;
            }, 0)
        }
    }
})

export default store

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