Vue外賣項目的學習（8）

點選左側，右側到達對應位置

clickMenuItem(index) {
        // console.log(index)
        // 使用右側清單滑動到對應的位置

        // 得到目标位置的scrollY
        const scrollY = this.tops[index]
        // 立即更新scrollY(讓點選的分類項成為目前分類)
        this.scrollY = scrollY
        // 平滑滑動右側清單
        this.foodsScroll.scrollTo(0, -scrollY, 300)
      },
           

增加減少

food中是沒有count屬性的，這裡應該想到food中count改變了，goods資料也是更新了，是以應該定義在vuex中進行管理

<template>
  <div class="cartcontrol">
    <transition name="move">
      <div class="iconfont icon-remove_circle_outline" v-if="food.count" @click.stop="updateFoodCount(false)"></div>
    </transition>
    <div class="cart-count" v-if="food.count">{{food.count}}</div>
    <div class="iconfont icon-add_circle" @click.stop="updateFoodCount(true)"></div>
  </div>
</template>

<script>
  export default {
    props: {
      food: Object
    },

    methods: {
      updateFoodCount (isAdd) {
        this.$store.dispatch('updateFoodCount', {isAdd, food: this.food})
      }
    }
  }
</script>
           

action，isAdd判斷是增加還是減少

// 同步更新food中的count值
  updateFoodCount({commit}, {isAdd, food}) {
    if (isAdd) {
      commit(INCREMENT_FOOD_COUNT, {food})
    } else {
      commit(DECREMENT_FOOD_COUNT, {food})
    }
  },
           

mutition 新增的屬性，必須資料綁定界面和資料才會更新，否則會出現資料更新，界面未更新的狀況

[INCREMENT_FOOD_COUNT](state, {food}) {
    if(!food.count) { // 第一次增加
      // food.count = 1  // 新增屬性(沒有資料綁定)
      /*
      對象
      屬性名
      屬性值
       */
      Vue.set(food, 'count', 1) // 讓新增的屬性也有資料綁定
    } else {
      food.count++
    }
  },
  [DECREMENT_FOOD_COUNT](state, {food}) {
    if(food.count) {// 隻有有值才去減
      food.count--
    }
  },
           

顯示食物詳情界面

也是控制顯示隐藏，使用v-if，這裡用了另一種比較麻煩的方法，但是使用了在父元件中調用子元件對象的方法，通過子元件标簽來調用方法

這裡傳的food是用來辨別目前對應li的食物

<li class="food-item bottom-border-1px" v-for="(food, index) in good.foods"
                  :key="index" @click="showFood(food)">
           

// 顯示點選的food
      showFood (food) {
        // 設定food
        this.food = food
        // 顯示food元件 (在父元件中調用子元件對象的方法)
        this.$refs.food.toggleShow()
      }
           

data() {
      return {
        scrollY: 0, // 右側滑動的Y軸坐标 (滑動過程時實時變化)
        tops: [], // 所有右側分類li的top組成的數組  (清單第一次顯示後就不再變化)
        food: {}, // 需要顯示的food
      }
    },
           

子元件

<script>
  import CartControl from '../CartControl/CartControl.vue'

  export default {
    props: {
      food: Object
    },

    data () {
      return {
        isShow: false
      }
    },

    methods: {
      toggleShow () {
        this.isShow = !this.isShow
      }
    },
           

這種值得學習，可能用的到

注意冒泡的問題 .stop停止冒泡

購物車動态顯示實作

這裡

else {

food.count++

}

是會改變cartFoods的，兩個變量指向同一個引用位址，其中一個變量修改引用位址中的值，另一個也會看到，都會變的

[INCREMENT_FOOD_COUNT](state, {food}) {
    if(!food.count) { // 第一次增加
      // food.count = 1  // 新增屬性(沒有資料綁定)
      /*
      對象
      屬性名
      屬性值
       */
      Vue.set(food, 'count', 1) // 讓新增的屬性也有資料綁定
      // 将food添加到cartFoods中
      state.cartFoods.push(food)
    } else {
      food.count++
    }
  },
  [DECREMENT_FOOD_COUNT](state, {food}) {
    if(food.count) {// 隻有有值才去減
      food.count--
      if(food.count===0) {
        // 将food從cartFoods中移除
        state.cartFoods.splice(state.cartFoods.indexOf(food), 1)
      }
    }
  },
 
           

getters

totalCount (state) {
    return state.cartFoods.reduce((preTotal, food) => preTotal + food.count , 0)
  },

totalPrice (state) {
    return state.cartFoods.reduce((preTotal, food) => preTotal + food.count*food.price , 0)
  },
           

computed: {
      ...mapState(['cartFoods', 'info']),
      ...mapGetters(['totalCount', 'totalPrice']),
      payClass () {
        const {totalPrice} = this
        const {minPrice} = this.info
        return totalPrice>=minPrice ? 'enough' : 'not-enough'
      },
      payText () {
        const {totalPrice} = this
        const {minPrice} = this.info
        if(totalPrice===0) {
          return `￥${minPrice}元起送`
        } else if(totalPrice<minPrice) {
          return `還差￥${minPrice-totalPrice}元起送`
        } else {
          return '結算'
        }
      },
           

腦子有點亂，感覺層層關聯，得好好梳理，先記住這種模式，熟悉一下