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

知識點(diǎn) ： query：查詢字符串

分析需求：我們需要在商品頁點(diǎn)擊具體商品的時(shí)候怜森，獲取當(dāng)前商品信息杆故，才能夠跳轉(zhuǎn)到具體的商品頁面 ：所以可以用查詢字符串獲取當(dāng)前的信息，就會拼接到地址欄上。
query:{itemId:item.sku_info[itemIndex].sku_id，地址欄會顯示 ： /item?itemId=100027101淮悼，問號后面的就是查詢字符串。

image.png

1. 組件：商品頁

商品頁中 ： 點(diǎn)擊商品詳情或者商品按鈕揽思，跳轉(zhuǎn)到商品詳情組件中袜腥。

<div class="item-cover">
        <router-link 
          //此處知識點(diǎn)query查詢字符串，拼接商品id
          //此時(shí)地址欄的顯示：http://localhost:8080/item?itemId=100027101
          :to='{name:"Item",query:{itemId:item.sku_info[itemIndex].sku_id}}'>
        </router-link>
</div>

2. 組件：views,即商品詳情頁钉汗，如何獲取傳遞過來的query數(shù)據(jù)瞧挤？

2-1 ： 首先在商品詳情頁引入數(shù)據(jù) ：

 import itemsData from '@/lib/newItemsData'
 data() {
      return {
          itemsData, //將數(shù)據(jù)掛載
          itemId : this.$route.query.itemId
      }
 }

2-2 ： 通過對比itemsData和itemId(即傳過來的query)，相同即可輸出對應(yīng)的數(shù)據(jù)儡湾。然后綁定到頁面上特恬。

computed: {
      itemInfo() {
        let itemInfo = this.itemsData.filter((item) => {
          return Number(item.sku_id) === Number(this.itemId) //return出來的是一個(gè)數(shù)組
        })[0]
        console.log(itemInfo)
        return itemInfo
      }
 }

2-3 ：商品左側(cè)圖片切換

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

這類切換需求，都是統(tǒng)一的設(shè)置一個(gè)index變量徐钠，綁定點(diǎn)擊事件的時(shí)候獲取當(dāng)前的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
  :to="{name:'Item',query:{itemId:color.id}}"
  :title="color.color"
  >
   <img :src="'http://img01.smartisanos.cn/'+color.image+'20X20.jpg'">    
</router-link>
watch : {
  //當(dāng)查詢字符串改變的時(shí)候，將當(dāng)前的值重新賦值
  '$route.query.itemId'(){
    this.itemId = this.$route.query.itemId
    this.imgIndex = 0
  }
}

2-5 加入購物車
直接調(diào)用vuex中寫好的方法即可

// 點(diǎn)擊加入購物車,直接用詳情頁寫好的即可绎秒，這里不是data,傳遞的是過濾好的itemInfo
        addCarPanelHandel(){
            let itemData = {
                info : this.itemInfo,
                count : this.count  //為的是用戶加了幾件就計(jì)算幾件
            }
            this.$store.commit('addCarPanelData',itemData)
 }

2-6 超出最大值顯示彈窗

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

總結(jié)

通過學(xué)習(xí)浦妄，我記住了一點(diǎn)：就會這類數(shù)據(jù)終將是要加入到購物車的，那么就是都操作的是vuex里的數(shù)據(jù)见芹，添加購物車已經(jīng)在vuex中寫好剂娄，所以這里只需要去commit相應(yīng)的mutation即可。
還學(xué)習(xí)到一點(diǎn)：可以傳遞對象玄呛。

addCarPanelHandel(){
            let itemData = {
                info : this.itemInfo, //當(dāng)前添加的數(shù)據(jù)
                count : this.count   //數(shù)量
            }
            this.$store.commit('addCarPanelData',itemData)
}