请老师帮我看一下,为什么获取不到count

请老师帮我看一下,为什么获取不到count

<template>
    <!-- 商品列表 -->
    <div class="content">
        <div class='content_nav' id="content_nav">
            <div :class="{ 'content_nav_item': true, 'active': currentTab === item.tab }" data-tab="all"
                v-for="item of tabData" :key="item.name" @click="() => getTab(item.tab)">{{ item.name }}</div>
            <!-- <div class="content_nav_item " data-tab="all">全部商品</div>
            <div class="content_nav_item " data-tab="seckill">秒杀</div>
            <div class="content_nav_item " data-tab="fruit">新鲜水果</div> -->
            <!-- <div class="content_nav_item ">休闲食品</div>
            <div class="content_nav_item ">时令蔬菜</div>
            <div class="content_nav_item ">肉蛋家禽</div> -->
        </div>
        <div class="content_item">
            <div class="content_dec" v-for="item of list" :key="item._id">
                <img :src="item.imgUrl" class="content_dec_img" alt="">
                <div class="content_dec_commodity">
                    <ul class="commodity_list">
                        <li class="commodity_list_name">{{ item.name }}</li>
                        <li class="commodity_list_number">月售{{ item.salce }}件</li>
                        <li class="commodity_list_price">¥{{ item.price }}</li>
                    </ul>
                    <div class="commodity_list_oldprice">¥{{ item.oldPrice }}</div>
                </div>
                <div class="content_dec_addsub">
                    <p class="addsub_minus" @click="()=>{changeShopContent(shopId, item._id, item,-1)}">—</p>
                    <p class="addsub_num">{{ carList?.[shopId]?.[item._id].count || 0 }}</p>
                    <p class="addsub_add" @click="() => { changeShopContent(shopId, item._id, item,1) }">+</p>
                </div>
            </div>
        </div>
    </div>
</template>
<!-- /api/shop/:id/products -->
<script>
import { reactive, toRefs, ref, watchEffect } from 'vue';
import { useRoute } from 'vue-router';
import { get } from '../../utils/request';
import  {useShopCarEffect} from './changeShopContent';
const tabData = [{ name: '全部商品', tab: 'all' },
{ name: '秒杀', tab: 'seckill' },
{ name: '新鲜水果', tab: 'fruit' }]
//Tab相关
const useTabDeffect = () => {
    const currentTab = ref(tabData[0].tab,)
    // console.log(ref(tabData[0].tab,));
    const getTab = (tab) => {
        currentTab.value = tab;
        console.log(tab);
        // getContentData(tab)
        // const content_nav_item=document.querySelectorAll('.content_nav_item')
        // for(let i=0;i<content_nav_item.length;i++){
        //     content_nav_item[i].classList.remove('active')
        // }
        // e.target.classList.add('active') 
    }
    return { currentTab, getTab }
}

//List列表相关
const useGetContentDataEffect = (currentTab, shopId) => {
    const contentList = reactive({ list: [] });
    // console.log(reactive([{ a: 1 }, { b: 2 }]));
    //获取列表商品数据
    const getContentData = async () => {
        const result = await get(`/api/shop/${shopId}/products`, { tab: currentTab.value });
        if (result?.errno === 0 && result?.data) {
            contentList.list = result.data
        }
    }
    //watchEffect监听getContentData中数据变动
    watchEffect(() => {
        getContentData()
    })

    const { list } = toRefs(contentList)
    // console.log(list);
    return { list }
}


export default {
    name: 'Content',
    setup() {
        const route = useRoute();
        const shopId = route.params.id
        const { currentTab, getTab } = useTabDeffect();
        const { list } = useGetContentDataEffect(currentTab, shopId);
        // const { contentList } = toRefs(data)
        const { changeShopContent,carList } = useShopCarEffect()
        return {
            getTab, tabData, currentTab, list,
            shopId,changeShopContent,carList
        };
    }

}
</script>

<style lang="scss" scoped>
@import '../../style/viriables.scss';
@import '../../style/mixins.scss';

.content {
    position: absolute;
    left: 0;
    right: 0;
    top: 1.60rem;
    bottom: .49rem;
    display: flex;


    &_nav {
        // width: .76rem;
        background-color: $content_bcgColor;

        &_item {
            width: 0.76rem;
            height: .40rem;
            font-size: .14rem;
            text-align: center;
            line-height: .40rem;
        }

        .active {
            background-color: #ffffff;
        }
    }

    &_item {
        flex-grow: 1;
        // width: 265px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0 .18rem 0 .16rem;
    }

    &_dec {
        width: 100%;
        height: .80rem;
        display: flex;
        justify-content: space-around;
        margin-bottom: .12rem;
        border-bottom: 1px solid #F1F1F1;
        position: relative;
        box-sizing: border-box;

        &_img {
            width: .68rem;
            height: .68rem;
        }

        &_commodity {
            display: flex;
            justify-content: space-between;
            flex-grow: 1;
            padding-left: .16rem;
            height: .68rem;
            overflow: hidden;
            position: relative;

            .commodity_list {
                line-height: .24rem;

                &_name {
                    @include ellipsis;
                    font-size: .14rem;
                }

                &_number {
                    font-size: .12rem;
                }

                &_price {
                    font-size: .14rem;
                    color: #E93B3B;
                }
            }

            .commodity_list_oldprice {
                position: absolute;
                font-size: 12px;
                text-decoration: line-through;
                bottom: 0;
                left: .60rem;
                color: #999999;
                transform: scale(.7);
            }
        }

        &_addsub {
            height: .20rem;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: 0px;
            bottom: .08rem;
            box-sizing: border-box;

            .addsub_minus,
            .addsub_add {
                width: .2rem;
                height: .2rem;
                display: inline-block;
                border-radius: 50%;
                text-align: center;
                line-height: .173rem;
            }

            .addsub_minus {
                width: .1858rem;
                height: .1858rem;
                border: 1px solid #666;
                color: #666;
                font-size: .10rem;
            }

            .addsub_add {
                width: .20rem;
                height: .2rem;
                background-color: #0091FF;
                color: #fff;
                font-size: .20rem;
            }

            .addsub_num {
                margin: 0 .10rem;
            }
        }
    }
}
</style>
import { toRefs } from 'vue';
import { createStore } from 'vuex'

export default createStore({
  state: {
    carList: {

    }
  },
  getters: {
  },
  mutations: {
    changeShopContent(state, payload) {
      const { shopId, productId, productData } = payload;
      let shopInfo = state.carList[shopId]
      if (!shopInfo) {
        shopInfo = {}
      }
      let productInfo = shopInfo[productId]
      if (!productInfo) {
        productInfo = productData
        productInfo.count = 0
      }
      productInfo.count = productInfo.count + payload.num;
      if (payload.num > 0) {
        productInfo.checked = true
      }
      if (productInfo.count >= 99) {
        productInfo.count = 99
      }
      if (productInfo.count <= 0) {
        productInfo.count = 0
      }
      shopInfo[productId] = productInfo;
      state.carList[shopId] = shopInfo;
    },
    toChangeChecked(state, payload) {
      const { shopId, productId } = payload;
      let product = state.carList[shopId][productId]
      product.checked=!product.checked
    }
  },
  actions: {
  },
  modules: {
  }
})
import { useStore } from 'vuex';
//购物车相关数据
export const useShopCarEffect = () => {
    const store = useStore();
    const  carList  = store.carList
    console.log(carList);
    const changeShopContent = (shopId, productId, productData, num) => {

        store.commit('changeShopContent', {
            shopId, productId, productData, num
        })
    }
    return { carList, changeShopContent }
}

代码和老师一样的,就不知道哪里错了

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
慕仙7313728 提问者 2023-07-29 20:41:35

你好,老师。原来这里漏了一个问号

{{ carList?.[shopId]?.[item._id]?.count || 0 }}

为什么不加?会报错?不是[item._id]下的count吗?


  •            

    同学你好,建议缕一下逻辑,在什么时候[item._id].count是不存在的?那么问号表达式的作用是什么(MDN上可以查到)

    祝学习愉快!

    2023-07-31 10:00:58
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师