一、前言

二、主要內容

1、效果

2、分析：

1）點擊按鈕進行加減操作，肯定要註冊一個點擊事件，可以給這個點擊事件傳入一個標識，讓他區別什麽時候加，什麽時候減

2）現在是將加減這一部分單獨提取出來的一個公共主鍵，所以還需要區分每一個主鍵

3）父組件中在遍歷的時候，(food, index) in goods 可以用food來區分每一項

4）從父組件哪裏傳進來一個food屬性（:food="food"），

5）子組件接收到這個food屬性，

6）我們用vuex來管理我們的數據狀態，所以操作數據的部分盡量在vuex中進行

3、具體實現

1）父組件中傳入自定義屬性

<!--父組件shopGoods中定義自定義屬性food,並且傳入-->
<li class="food-item bottom-border-1px" v-for="(food, index) in good.foods" :key
 
="index">
               
   <div class="cartcontrol-wrapper">
    <CartControl :food=‘food‘></CartControl>
   </div>
</li>

2）子組件中接收，並且使用，接收的目的是為了區分每一項

props: { //接收傳入的food
        food: {
            type: Object
        }
    },

3）給“+”，“-”註冊點擊事件，傳進去一個標識，true==加操作， false==減操作

    <transition name="move">
          <div class="iconfont iconremove_circle_outline" v-if="food.count" @click="updateFoodCount(false)"></div>
    </transition>
        <div class="cart-count">{{food.count}}</div>
        <div class="iconfont iconadd_circle" @click="updateFoodCount(true)"></div>
   

4）點擊操作執行的時候同時發送一個dispatch交給vuex去處理狀態數據

 methods:{
      updateFoodCount(isAdd){
        //如果為true就加
        //如果為false就減
        //但是這裏加減不能直接在組件裏面寫，將這些操作交給vuex處理
        //food.count++
        //要傳遞參數：需要讓後臺識別是加還是減：isAdd, 需要讓後臺知道是哪一個food發生變化，所以需要傳過去這兩個
        //food一定要加this
        this.$store.dispatch("updateFoodCount",{isAdd,food: this.food})
      }
    }
    

5）vuex結構目錄（下面將根據代碼執行的步驟來分析）

6）先提交到actions.js裏面，actions接收到傳過來的參數，根據參數判斷加還是減，

//同步更新count,因為不需要去後臺後去數據,接收到前面獲取的參數isAdd,food
  updateFoodCount({commit},{isAdd, food}){

      //然後判斷isAdd=true 加， isAdd=false 減
      if(isAdd){
          //true就commit mutation中的RECEIVE_ADD_COUNT和RECEIVE_DECRESS_COUNT
          commit(RECEIVE_ADD_COUNT,{food})
      }else{
          commit(RECEIVE_DECRESS_COUNT,{food})
      }

  }

7）actions.js中commit到mutations.js中分別根據isAdd的值，去執行不同的函數

//actions.js中commit執行這裏的函數
  //加操作
[RECEIVE_ADD_COUNT](state,{food}){
            //如果沒有food.count，點一下就加上了這個自定義屬性
            //由於這個自定義屬性不是響應式的數據，可以用vue插件看到數據改變了，但是視圖並沒發生變化
            if(!food.count){
                  //food.count=1，視圖沒有出現
                 // food.count=1
                  Vue.set(food, ‘count‘, 1)  //手動添加數據雙向綁定

            }else{
                  food.count++
            }
      },

      //減操作

      [RECEIVE_DECRESS_COUNT](state,{food}){
            food.count--
            if(food.count<=0){
                  food.count=0;
            }

      }

三、總結

Vuex(實現加減操作,Vue.set解決自定義屬性沒有雙向數據綁定)