在Vuex上添加多个有效负载

Question

我想将2个数据，数量和ID传递给商店，所以我尝试在Actions上提供2个有效载荷，但它不起作用。这两个数据均未定义

如何在同一事件中传递2个有效载荷？ （您可以找到console.logs所在的位置）

[当我放置一个有效载荷（id或数量时，我得到了正确的值，但是当我尝试提供2个有效载荷时却没有。）>

提前感谢！

这里是我的组件：

    <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
    },
    id: {
      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>
      id : {{ id }}
      <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>
这里商店：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    restaurantName: 'Cafe with A Vue',
    shoppingCart: 0,
    selectedItemId: 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_TOTAL_SHOPPING_CART(state, {amount}) {
      state.shoppingCart += amount
    }
  },
  actions: {
    updateShoppingCart({ commit }, {amount, id}) {
      commit('ADD_ITEMS_TO_TOTAL_SHOPPING_CART', {amount, id})
      console.log(id)
      console.log(amount)
    }
  },
  modules: {}
})

我想将2个数据，数量和ID传递给商店，所以我尝试在Actions上提供2个有效载荷，但它不起作用。这两个数据均未定义如何在同一事件中传递2个有效载荷？ （您可以...

Answer 1

您的操作需要一个具有2个属性的对象：amount和id。但是，您不是传递对象，而是传递两个单独的变量updateShoppingCart(quantity, id)。