Vue. Js / Vuex - как объявить id элементов

Question

Это простая корзина покупок. На самом деле, когда мы кликаем c на товарах, она обновляет общее количество в корзине.

Но я хочу сейчас сделать лучшую корзину: показывать каждый товар на список. Как и когда мы выбрали 2 круассана, он добавляет в корзину 2 круассана.

Моя проблема - , в этом курсе я действительно не научился делать зависимости мутации от идентификатора. пункта Я ищу синтаксис, который отправляет идентификатор магазина, в котором мы щелкнули, в магазин.

Здесь мои мои 3 файла: (Магазин "index", "Home" и его потомки "MenuItem" )

Магазин:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    restaurantName: 'Cafe with A Vue',
    shoppingCart: 0,
    croissiantNumber: 0,
    baguetteNumber: 0,
    eclairNumber: 0,
    simpleMenu: [
      {
        id: 1,
        name: 'Crossiant',
        image: {
          source: '/images/crossiant.jp',
          alt: 'A crossiant'
        },
        inStock: true,
        quantity: 1,
        price: 2.99
      },
      {
        id: 2,
        name: 'French Baguette',
        image: {
          source: '/images/french-baguette.jpe',
          alt: 'Four French Baguettes'
        },
        inStock: true,
        quantity: 1,
        price: 3.99
      },
      {
        id: 3,
        name: 'Éclair',
        image: {
          source: '/images/eclair.jp',
          alt: 'Chocolate Éclair'
        },
        inStock: false,
        quantity: 1,
        price: 4.99
      }
    ]
  },
  getters: {
    copyright: state => {
      const currentYear = new Date().getFullYear()

      return `Copyright ${state.restaurantName} ${currentYear}`
    }
  },
  mutations: {
    ADD_ITEMS_TO_SHOPPING_CART(state, amount) {
      state.shoppingCart += amount
    }
  },
  actions: {
    updateShoppingCart({ commit }, amount) {
      commit('ADD_ITEMS_TO_SHOPPING_CART', amount),
      commit('ADD_ITEM_TO_SHOPPING_CART', amount)
    }
  },
  modules: {}
})

Дом:

<template>
  <div>
    <h1>{{ restaurantName }}</h1>
    <p class="description">
      Welcome to {{ restaurantName }}! We are known for our freshly baked bread
      and french pastries! Give you morning a warm start or treat yourself in
      the middle of the day. Our butter is imported from local farmers in
      France. Once you take your first bite, you will see why everyone can't get
      enough!
    </p>

    <section class="menu">
      <h2>Menu</h2>
      <MenuItem
        v-for="item in simpleMenu"
        :name="item.name"
        :image="item.image"
        :price="item.price"
        :quantity="item.quantity"
        :inStock="item.inStock"
        :key="item.name"
        :id="item.id"
      />
    </section>

    <div class="shopping-cart">
      <h2>Shopping Cart: {{ shoppingCart }} items</h2>
      <h2>Croissiant: {{ croissiantNumber }} items</h2>
      <h2 v-if="baguetteNumber">French Baguette: {{ baguetteNumber }} items</h2>
      <h2 v-if="eclairNumber">Eclair: {{ eclairNumber }}items</h2>
    </div>

    <footer class="footer">
      <p>{{ copyright }}</p>
    </footer>
  </div>
</template>

<script>
import MenuItem from '../components/MenuItem'
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'Home',
  components: {
    MenuItem
  },
  computed: {
    ...mapGetters({
      copyright: 'copyright'
    }),
    ...mapState({
      restaurantName: 'restaurantName',
      shoppingCart: 'shoppingCart',
      croissiantNumber: 'croissiantNumber',
      baguetteNumber: 'baguetteNumber',
      eclairNumber: 'eclairNumber',
      simpleMenu: 'simpleMenu'
    })
  }
}
</script>

MenuItem:

<script>
import { mapActions } from 'vuex'
import BaseButton from './BaseButton.vue'

export default {
  name: 'MenuItem',
  components: {
    BaseButton
  },
  props: {
    image: {
      type: Object,
      required: true
    },
    inStock: {
      type: Boolean,
      required: true
    },
    name: {
      type: String,
      required: true
    },
    price: {
      type: Number,
      required: true
    },
    quantity: {
      type: Number,
      defaut: 1
    }
  },
  data() {
    return {
      onSale: false
    }
  },
  computed: {
    generatedPrice() {
      if (this.onSale) {
        return (this.price * 0.9).toFixed(2)
      } else {
        return this.price
      }
    }
  },
  methods: {
    ...mapActions(['updateShoppingCart'])
  },
  beforeMount() {
    const today = new Date().getDate()

    if (today % 2 === 0) {
      this.onSale = true
    }
  }
}
</script>

<template>
  <div class="menu-item">
    <img class="menu-item__image" :src="image.source" :alt="image.alt" />
    <div>
      <h3>{{ name }}</h3>
      <p>Price: {{ generatedPrice }} <span v-if="onSale">(10% off!)</span></p>
      <p v-if="inStock">In Stock</p>
      <p v-else>Out of Stock</p>
      <div>
        <label for="add-item-quantity">Quantity: {{ quantity }}</label>
        <input v-model.number="quantity" id="add-item-quantity" type="number" />
        <BaseButton @click="updateShoppingCart(quantity, id)" class="test">
          Add to shopping cart
        </BaseButton>
      </div>
    </div>
  </div>
</template>

Поэтому я хочу обновить это значение, например:

Croissiant: 0 items

Предварительный просмотр сайта

Спасибо.

Answer 1

Вы должны передать объект или массив в ваше действие для обработки нескольких параметров.

@click="updateShoppingCart({quantity, id})"

и затем в хранилище:

 ...
  actions: {
    updateShoppingCart({ commit }, {quantity, id}) {
      commit('ADD_ITEMS_TO_SHOPPING_CART', amount),

      //here you have id that you can map to item type
    }
  },

Я бы предложите иметь тип элемента, который является постоянным в simpleMenu и не зависит от идентификаторов.