8-商品详情页数据

屏幕快照 2018-03-05 下午5.39.19.png

知识点 ： query：查询字符串

分析需求：我们需要在商品页点击具体商品的时候，获取当前商品信息，才能够跳转到具体的商品页面 ：所以可以用查询字符串获取当前的信息，就会拼接到地址栏上。
query:{itemId:item.sku_info[itemIndex].sku_id，地址栏会显示 ： /item?itemId=100027101，问号后面的就是查询字符串。

image.png

1. 组件：商品页

商品页中 ： 点击商品详情或者商品按钮，跳转到商品详情组件中。

<div class="item-cover">
        <router-link 
          //此处知识点query查询字符串，拼接商品id
          //此时地址栏的显示：http://localhost:8080/item?itemId=100027101
          :to='{name:"Item",query:{itemId:item.sku_info[itemIndex].sku_id}}'>
        </router-link>
</div>

2. 组件：views,即商品详情页，如何获取传递过来的query数据？

2-1 ： 首先在商品详情页引入数据 ：

 import itemsData from '@/lib/newItemsData'
 data() {
      return {
          itemsData, //将数据挂载
          itemId : this.$route.query.itemId
      }
 }

2-2 ： 通过对比itemsData和itemId(即传过来的query)，相同即可输出对应的数据。然后绑定到页面上。

computed: {
      itemInfo() {
        let itemInfo = this.itemsData.filter((item) => {
          return Number(item.sku_id) === Number(this.itemId) //return出来的是一个数组
        })[0]
        console.log(itemInfo)
        return itemInfo
      }
 }

2-3 ：商品左侧图片切换

屏幕快照 2018-03-06 下午4.02.59.png

这类切换需求，都是统一的设置一个index变量，绑定点击事件的时候获取当前的index,然后改变index即可。

data() {
      return {
        imgIndex: 0
      }
},
methods: {
        tableImg(index){
            this.imgIndex = index
        }
}
======
<li 
  :class="{'on':index==imgIndex}"   //判断imgIndex来控制显示隐藏或切换cur
  @click="tableImg(index)"
>
</li>

2-4 ：商品切换

屏幕快照 2018-03-06 下午5.23.37.png
实际上就是重新渲染这个组件，所以这几个切换颜色的按钮需要时router-link,在点击的时候获取$route.query.id，因为这个页面已经是对应的商品了，现在是切换对应商品里面的不同商品颜色（可以看数据结构就明白了）。但是查询字符串的ID一开始就已经是确认了，如何响应它的变化？就用到了watch来监控，让当前的查询字符串等于router-link上传递的查询字符串，即可对应到此条数据。
总结：此页面是通过查询字符串的ID来改变的，所以要实时获取这个ID，用watch监控。

<router-link
  :to="{name:'Item',query:{itemId:color.id}}"
  :title="color.color"
  >
   <img :src="'http://img01.smartisanos.cn/'+color.image+'20X20.jpg'">    
</router-link>
watch : {
  //当查询字符串改变的时候，将当前的值重新赋值
  '$route.query.itemId'(){
    this.itemId = this.$route.query.itemId
    this.imgIndex = 0
  }
}

2-5 加入购物车
直接调用vuex中写好的方法即可

// 点击加入购物车,直接用详情页写好的即可，这里不是data,传递的是过滤好的itemInfo
        addCarPanelHandel(){
            let itemData = {
                info : this.itemInfo,
                count : this.count  //为的是用户加了几件就计算几件
            }
            this.$store.commit('addCarPanelData',itemData)
 }

2-6 超出最大值显示弹窗

 <prompt></prompt>
// 弹窗
  import prompt from '@/components/prompt'
 components: {
      prompt  
}

总结

通过学习，我记住了一点：就会这类数据终将是要加入到购物车的，那么就是都操作的是vuex里的数据，添加购物车已经在vuex中写好，所以这里只需要去commit相应的mutation即可。
还学习到一点：可以传递对象。

addCarPanelHandel(){
            let itemData = {
                info : this.itemInfo, //当前添加的数据
                count : this.count   //数量
            }
            this.$store.commit('addCarPanelData',itemData)
}