vue3.0实现完整购物车功能

     最近使用vue做了一个功能相对完整的购物车功能，购物车功能很多项目都会涉及，所以贴在这和大家分享一下，也欢迎各位家人指出不足。（最后有完整代码哦，可以自取）

一、页面绘制+v-for循环数据+Mock生成模拟数据

<div id="app">

        <div class="box">
            <div class="card mt-4">
                <div class="card-body">
                    <form>
                        <div class="mb-3">
                            <label class="form-label">产品名称</label>
                            <input type="text" class="form-control" v-model="newGood.goodName">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">产品数量</label>
                            <input type="number" class="form-control" v-model="newGood.goodPrice">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">产品单价</label>
                            <input type="number" class="form-control" v-model="newGood.goodNums">
                        </div>
                        <div class="d-grid gap-2">
                            <button type="button" class="btn btn-primary" @click="addNewGood()">添加</button>
                        </div>
                    </form>
                </div>
            </div>
            <table class="table table-bordered mt-4">
                <thead class="table-dark">
                    <tr>
                        <th>
                            <input type="checkbox" v-model="all">
                        </th>
                        <th>编号</th>
                        <th>产品名称</th>
                        <th>产品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for=" (good,i) in goods" :key="good.goodId">
                        <td>
                            <input type="checkbox" v-model="good.state">
                        </td>
                        <td>{
  { i+1 }}</td>
                        <td>{
  { good.goodName }}</td>
                        <td>{
  { good.goodPrice }}</td>
                        <td>
                            <div class="input-group input-group-sm num-ground">
                                <!-- <button class="btn btn-outline-secondary" type="button" @click="subGoodNums(i)">-</button> -->
                                <button class="btn btn-outline-secondary" type="button" @click="subGoodNums2(i,good)">-</button>