老师代码优化后又出现了问题，明明和老师一样啊

把

cartList?.[shopId]?.productList?.[productId]?.count || 0

进行优化后的代码

<template>

<div class="content">

<div class="category">

<div

:class="{

category__item: true,

'category__item--active': currentTab === item.tab,

}"

v-for="(item, index) in catogories"

:key="index"

@click="handleTabClick(item.tab)"

>

{{ item.name }}

</div>

</div>

<div class="product">

<div class="product__item" v-for="item in list" :key="item._id">

<img class="product__item__img" :src="item.imgUrl" />

<div class="product__item__detail">

<h4 class="product__item__title">{{ item.name }}</h4>

<p class="product__item__sales">月售 {{ item.sales }} 件</p>

<p class="product__item__price">

<span class="product__item__yen">&yen;</span>{{ item.price }}

<span class="product__item__origin">`&yen;{{ item.oldPrice }}</span>

</p>

</div>

<div class="product__number">

<span

class="product__number__minus"

@click="changeCartItem(shopId, item._id, item, -1, shopName)"

>-</span

>

{{getProductCartCount(shopId, item._id)}}

<span

class="product__number__pius"

@click="changeCartItem(shopId, item._id, item, 1, shopName)"

>+</span

>

</div>

</div>

</div>

</div>

</template>

<script>

import { useRoute } from "vue-router";

import { reactive, ref, toRefs, watchEffect } from "vue";

import { useStore } from "vuex";

import { useCommonCartEffect } from "./commonCartEffect";

import { get } from "../../utils/request";

const catogories = [

{

name: "全部商品",

tab: "all",

},

{

name: "秒杀",

tab: "seckill",

},

{

name: "新鲜水果",

tab: "fruit",

},

];

// 和Tab切换相关的逻辑

const useTabEffect = () => {

const currentTab = ref(catogories[0].tab);

const handleTabClick = (tab) => {

currentTab.value = tab;

};

return { currentTab, handleTabClick };

};

// 列表内容相关的逻辑

const useCurrentListEffect = (currentTab, shopId) => {

const content = reactive({ list: [] });

const getContentData = async () => {

const result = await get(`/api/shop/${shopId}/products`, {

tab: currentTab.value,

});

if (result?.errno === 0 && result?.data) {

content.list = result.data;

}

};

// 当首次页面加载的时候，或者方法所依赖的数据变化的时候执行

watchEffect(() => {

getContentData();

});

const { list } = toRefs(content);

return {

list,

};

};

// 购物车相关逻辑

const useCartEffect = () => {

const store = useStore();

const { cartList, changeCartItemInfo } = useCommonCartEffect();

const changeShopName = (shopId, shopName) => {

store.commit("changeShopName", { shopId, shopName });

};

const changeCartItem = (shopId, productId, productInfo, num, shopName) => {

changeCartItemInfo(shopId, productId, productInfo, num);

changeShopName(hopId, shopName);

};

const getProductCartCount = (shopId, productId) => {

return cartList?.[shopId]?.productList?.[productId]?.count || 0

};

return { cartList, changeCartItem, getProductCartCount };

};

export default {

name: "Content",

props: ["shopName"],

setup() {

const route = useRoute(); //当前访问路径的信息

const shopId = route.params.id;

const { currentTab, handleTabClick } = useTabEffect();

const { list } = useCurrentListEffect(currentTab, shopId);

const { cartList, changeCartItem, getProductCartCount } = useCartEffect();

return {

catogories: catogories,

currentTab,

list,

shopId,

cartList,

changeCartItem,

handleTabClick,

getProductCartCount

};

},

};

</script>

<style lang="scss" scoped>

@import "../../style/virables.scss";

@import "../../style/mixins.scss";

.content {

display: flex;

position: absolute;

left: 0;

right: 0;

top: 1.5rem;

bottom: 0.5rem;

}

.category {

overflow-y: scroll;

height: 100%;

width: 0.76rem;

background: $search-bgColor;

&__item {

line-height: 0.4rem;

text-align: center;

font-size: 0.14rem;

color: $content-fontcolor;

&--active {

background: white;

}

}

}

.product {

overflow-y: scroll;

flex: 1;

&__item {

position: relative;

display: flex;

padding: 0.12rem 0;

margin: 0 0.16rem;

border-bottom: 0.01rem solid $content-bgColor;

&__detail {

overflow: hidden;

}

&__img {

width: 0.68rem;

height: 0.68rem;

margin-right: 0.16rem;

}

&__title {

margin: 0;

line-height: 0.2rem;

font-size: 0.14rem;

color: $content-fontcolor;

@include ellipsis;

}

&__sales {

margin: 0.06rem 0;

line-height: 0.16rem;

font-size: 0.12rem;

color: $content-fontcolor;

}

&__price {

margin: 0;

line-height: 0.2rem;

font-size: 0.14rem;

color: $hightlingt-fontColor;

}

&__yen {

font-size: 0.12rem;

}

&__origin {

margin-left: 0.06rem;

line-height: 0.2rem;

font-size: 0.12rem;

color: $light_fontColor;

text-decoration: line-through;

}

.product__number {

position: absolute;

right: 0.18rem;

bottom: 0.12rem;

&__minus,

&__pius {

display: inline-block;

width: 0.2rem;

height: 0.2rem;

line-height: 0.16rem;

border-radius: 50%;

font-size: 0.2rem;

text-align: center;

}

&__minus {

border: 0.01rem solid $medium_fontColor;

color: $medium_fontColor;

margin-right: 0.05rem;

}

&__pius {

background: $btn-bgColor;

color: white;

margin-left: 0.05rem;

}

}

}

}

</style>