VUE-06 制作购物车

本节：明歌视频  vue3、vite、pinia 快速入门（完结）_哔哩哔哩_bilibili

使用vue3写一个购物车案例。

 这里使用了一个首页，和一个购物车组件，还有store文件来存储全局变量。

首页：template部分 

 变量和方法的部分：

首页代码

<template>
    <div style="display:flex;">
        商品页面
        <div class=" product" v-for="(goods, index) in products">
            <div>{{ goods.id }}</div>
            <img class="img1" :src="goods.img01">
            <!-- <div><img src="../img/1.png" alt=""></div> -->
            <div>{{ goods.name }}---{{ goods.price }}元-

            </div>
            <div>数量：{{ cartStoreList.getCount(goods.id) }}</div>
            <div>总价：{{ cartStoreList.getN(goods.id) }} </div>
            <div @click="addOne(goods)"><button>点击加入购物车</button></div>
            <!-- addOne(goods)这个goods传的是一整个对象值 -->
        </div>

        <div style="position: fixed;right: 300px;">
            <MyCart></MyCart>
        </div>

    </div>
</template>


<script setup>//1、引入路由
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { cartStore } from '../store/cartStore'
import cart from "../img/car.jpg"
import one from "../img/1.png"
import two from "../img/feng.jpg"
import thirt from "../img/2.jpg"
import MyCart from '../components/myCart.vue'

//2、注册路由
const router = useRouter()
const route = useRoute();//获取上级路由传参
let cartStoreList = cartStore();

//3.定义数组
let products = reactive([
    { id: 1, name: "不屑猫猫", price: 100, img01: cart, number: 0 },
    { id: 2, name: "小明老师的课程", price: 2980, img01: one, number: 0 },
    { id: 3, name: "下班的傍晚", price: 1314, img01: two, number: 0 },
    { id: 4, name: "玫瑰猫猫", price: 520, img01: thirt, number: 0 },

])

function addOne(goods) {
    //这里加一个goods就是一个完整的对象，就是上面的那个指针
    cartStoreList.addproduct(goods, 1)
    // cartStoreList.addNumber(goods.id, 1)
}

</script>

<style lang="scss" scoped>
.product {
    border-radius: 15px;
    border: 1px solid palevioletred;
    width: 150px;
    height: 180px;
    text-align: center;
    margin-top: 10px;

    .img1 {
        width: 100px;
        height: 100px
    }
}
</style>

购物车组件：templete内容

 script部分

 购物车代码：

<template>
    <div style="right:0px;display:flex;width: 300px;">
        MyCart我的购物车

        <div class="product" v-for="(goods, index) in cartStoreList.products">
            <div>{{ goods.goods.id }}</div>
            <img class="img1" :src="goods.goods.img01">
            <!-- <div><img src="../img/1.png" alt=""></div> -->
            <div>{{ goods.goods.name }}---{{ goods.goods.price }}元</div>
            <div><button @click="updataNumber(goods.goods, 1)">+</button>
                {{ goods.number }}
                <button @click="updataNumber(goods.goods, -1)">-</button>
            </div>
        </div>
        <div>总价格：{{ cartStoreList.totalPrice }}</div>


    </div>
</template>

<script setup>
//1、引入路由
import { useRouter, useRoute } from 'vue-router'
import { cartStore } from '../store/cartStore'

//2、注册路由
const router = useRouter()
const route = useRoute()//获取上级路由传参
let cartStoreList = cartStore();

function updataNumber(goods, number) {
    cartStoreList.addproduct(goods, number)
}


</script>

<style lang="scss" scoped>
.product {
    border-radius: 15px;
    border: 1px solid palevioletred;
    width: 150px;
    height: 180px;
    text-align: center;
    margin-top: 10px;

    .img1 {
        width: 100px;
        height: 100px
    }
}
</style>

store的写法：很多方法都是在store定义的，所以这里很多坑。

 添加产品的方法

 action方法和getters方法

store代码：

//1.引入pinia
import { defineStore, storeToRefs } from 'pinia'

//2.写一个类似data的格式，存储数据
export const cartStore = defineStore("mycart", {
    //mycart这个全局只能唯一，不能重复，cartStore是引用时候的名字
    state: () => {
        return {//这里类似data，存储变量
            //1.放一个空数组，用来接收传过来的数据
            products: []
        }

    },
    actions: {//这里类似methods，用来放方法的
        addproduct(goods, number) {//点击添加产品
            let productIndex = this.products.findIndex((index) => {
                return index.goods.id == goods.id
            })
            //product这个是list页面，方法传过来的数组，名字要一致
            if (productIndex > -1) {//productIndex是放进来的每一个产品
                // 商品已存在
                this.products[productIndex].number += number;
                if (this.products[productIndex].number == 0) {
                    this.products.splice(productIndex, 1)
                    //减一个数组，并且会自动返回的数组
                }
                // return this.products[productIndex].number;

            } else {
                //商品不存在

                this.products.push({
                    goods: goods,//第一个goods是这里的products创建存储数据的变量，第二个goods是我传过来的值
                    number: 1
                })
            }

        },

        getCount(goodsId) {
            let productIndex = this.products.findIndex((index) => {
                return index.goods.id == goodsId
                //如果获取的ID和我这个页面的products里的ID一样，就放到productIndex里面
            })

            if (this.products[productIndex]) {
                // 这个这个数组不为空，就返回对应的数据
                return this.products[productIndex].number

            }
            return 0
        },
        getN(goodsId) {
            // 计算单个产品的总价格
            let productIndex = this.products.findIndex((index) => {
                return index.goods.id == goodsId
                //如果获取的ID和我这个页面的products里的ID一样，就放到productIndex里面
            })

            if (this.products[productIndex]) {
                // 这个这个数组不为空，就返回对应的数据
                let _productPrice = 0;
                // index1.goods.price;
                let list = this.products[productIndex].goods
                _productPrice += this.products[productIndex].number * list.price
                console.log(this.products[productIndex].number, list.price)
                return _productPrice
            }
            return 0
        },
    },
    getters: {//这里是类似conputed，计算属性
        //计算购物车里面全部东西的价格
        totalPrice(state) {
            let _totalPrice = 0;
            for (let index1 of state.products) {
                _totalPrice += index1.number * index1.goods.price;
            } return _totalPrice;
        },
    }

})

 最后，这次浪费了很多时间的地方是

一、let a =  0,一定要定义值，初始化，不然会变成Nav，计算就会有问题 

二、数组和单独抽出来的变量，调用的时候，指针要指清楚，不然值一直出不来，还以为是方法写错了，实际上就是很简单的指针指错位置了。