Vuex(實現加減操作,Vue.set解決自定義屬性沒有雙向數據綁定)
一、前言
二、主要內容
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解決自定義屬性沒有雙向數據綁定)