请老师帮我看一下,为什么获取不到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 } }
代码和老师一样的,就不知道哪里错了
5
收起
正在回答 回答被采纳积分+1
1回答
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星