在 Vuex 上添加多个 Payload

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: {}
})

Answer 1

问题 1

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

在您的模板中，改为这样称呼它：

updateShoppingCart({ amount: quantity, id });  // Note the object brackets

或者，将组件中的 quantity 重命名为 amount，您可以这样称呼它：

updateShoppingCart({ amount, id });

问题 2（使用destructuring）

变异：

ADD_ITEMS_TO_TOTAL_SHOPPING_CART(state, { amount, id }) {
  state.shoppingCart += amount;
  console.log(id);
}

行动：

updateShoppingCart({ commit }, { amount, id }) {
  commit('ADD_ITEMS_TO_TOTAL_SHOPPING_CART', { amount, id })
  console.log(id)
  console.log(amount)
}

问题 2b（替代使用 payload）：

变异：

ADD_ITEMS_TO_TOTAL_SHOPPING_CART(state, payload) {
  state.shoppingCart += payload.amount;
  console.log(payload.id);
}

行动：

updateShoppingCart({ commit }, payload) {
  commit('ADD_ITEMS_TO_TOTAL_SHOPPING_CART', payload)
  console.log(payload.id)
  console.log(payload.amount)
}