Vue2电商前台项目（四）：完成Detail详情页模块业务

小粉粉hhh

已于 2024-04-13 21:37:46 修改

阅读量1.4k

点赞数 31

文章标签：前端 javascript 开发语言

于 2024-04-13 21:01:06 首次发布

本文链接：https://blog.csdn.net/Hdhhdhbsjxbdhvyg/article/details/137642746

版权

1.Detail父组件把图片数据传给放大镜子组件

2.解决数据未请求到时获取其属性报错的问题

一、项目开发的步骤

静态=>请求(api)=>vuex=>动态组件

二、配置路由规则+滚动行为

1.配置路由规则

我们引入静态组件之后，得在router里给detail配置路由

import Detail from '../pages/Detail'
       {
            path:'/detail',
            component:Detail,
            meta:{show:true}
        }

点击图片就进行路由跳转显示产品，所以需要params传参，就得占位

 path:'/detail/:skuId',

把装有图片的a标签换成router-link

<router-link :to="`/detail/${good.id}`">
  <img :src="good.defaultImg" />
</router-link>

2.滚动行为

现在点击之后滚轮默认在你前一页待的地方，所以我们得设置一下滚轮位置

我们先把路由信息分开写到routers.js里，index再调用看着比较方便

import routes from './routes'
export default new VueRouter({
    //配置路由
    routes
    //kv 一致省略v
    scrollBehavior(to, from, savedPosition) {
        return { y: 0 }//代表滚动条在最上方
    }
})

滚动行为scrollBehavior(to, from, savedPosition)，可以设置x、y坐标

三、请求详情页数据并展示数据

1.api接口

//获取信息详情的api
export const reqGoodsInfo = (skuId) => {
   return requests({ url: `http://gmall-h5-api.atguigu.cn/api/item/${skuId}`, method: 'get'})
}

2.写Vuex获取数据

还需要一个新的仓库服务detail，新建一个文件夹detail/index.js

import { reqGoodsInfo } from "@/api"
const state = {
    goodInfo: {}
}
const mutations = {
    GETGOODINFO(state, goodInfo) {
        state.goodInfo = goodInfo
    }
}
const actions = {
    //获取产品信息
    async getGoodInfo({ commit }, skuId) {
        let result = await reqGoodsInfo(skuId)
        if (result.code == 200) {
            commit('GETGOODINFO', result.data)
        }
    }
}
const getters = {}
export default {
    state,
    actions,
    mutations,
    getters
}

小仓库建完了之后需要回到大仓库进行合并

import detail from './detail/index'
modules:{
        home,
        search,
        detail
    }

3.派发actions

用户点击图片之后触发action，所以应该是detail组件挂载完毕之后触发action

mounted() {
      //派发action
      console.log(this.$route.params)
      this.$store.dispatch('getGoodInfo',this.$route.params.skuId)
    },

4.展示动态数据

去仓库当中简化数据，这两个都是对象类型的

const getters = {
    categoryView(state){
        return state.goodInfo.categoryView||{}
        //不加||{}会有个报错，因为数据没回来的时候，{}.categoryView是undefined
        //捞回来之后才有
    },
    skuInfo(state){
        return state.goodInfo.skuInfo||{}
    }
}

捞数据：

  import {mapGetters} from 'vuex'
  computed:{
      ...mapGetters(['categoryView','skuInfo'])
    }

然后就能直接用了

<div class="conPoin">
        <span v-show="category

最低0.47元/天解锁文章