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：父给子