1.静态组件
---注册路由,(router.js)
---,要传参
{
path:"/detile/:skuid",
component:Detile,
meta:{show:false}
},
---当点击图片时,跳转到详情页面,要传参
<router-link :to="`/detail/${good.id}`">//属性值中出现了变量,所以要变成动态的to,传参所以用``
<img :src="good.defaultImg"/>
</router-link>
2.发请求api
//获取商品详情 地址/api/item/{ skuId } 请求方式 GET
export const reqGoodsInfo=(skuId)=> requests({url:`/item/${skuId}`,method:'get'})
3.vuex
---vuex还需要新增一个模块detail.js
四件套state,
mutations,
actions,
getters
再回大仓库中合并(引入)
----发请求,把detail中的数据弄出来,并展示
import {reqGoodsInfo} from '@/api'
//search模块的小仓库
//对外暴露store类的一个实例
//state:{},仓库存储数据的地方
const state={
goodInfo:{},
}
// mutations:{},修改state的唯一手段
const mutations={
GETGOODSINFO(state,goodInfo){
state.goodInfo=goodInfo;
}
}
// actions:{},处理action,可以书写自己的业务逻辑,也可以处理异步
const actions={
//获取产品信息的action,{commit}是有参数要传的意思
async getGoodsInfo({commit},skuId){
//await是在等reqGoodsInfo的结果,把他接收在result中,与async是一对,缺一不可
let result=await reqGoodsInfo(skuId);
if(result.code==200){
//提交到mutations,修改state
commit('GETGOODSINFO',result.data);
}
}
}
//getters:计算属性,用于简化仓库数据,让组件获取仓库的数据更加方便(简化数据而生)
//可以把我们将来在组件当中需要用到的数据简化一下(将来用到这些数据的时候就方便了)
const getters={
//当前形参state,当前仓库中的state,并非大仓库中的哪个state
// goodsList(state){
// //如果服务器数据回来了,没问题是一个数组,但是如果网络不给力或者没有网,则返回一个空数组
// return state.searchList.goodsList||[];
// },
// trademarkList(state){
// return state.searchList.trademarkList;
// },
// attrsList(state){
// return state.searchList.attrsList;
// }
}
套路在这
---dispatch派发action(什么时候派发呢)
当用户点击图片的详情的时候就该派发
mounted(){
//派发action获取产品详情的信息,要把参数也带上
this.$store.dispatch('getGoodsInfo',this.$route.params.skuid)
}
----拿到数据(但是数据太长了如何简化呢?)
const getters={
//简化数据
categoryView(state){
return state.goodInfo.categoryView||{};
}
}
--------拿到了怎么用数据呢?
在需要用数据的页面上引入
import {mapGetters} from 'vuex'
computed:{
...mapGetters(['categoryView'])
}
4.动态展示组件
自定义事件:子给父传
props:父给子