반응형
Vuex에서 여러 페이로드 추가
2개의 데이터, 금액, ID를 스토어에 전달하고 싶기 때문에 Actions에 2개의 payload를 부여하려고 하는데 동작하지 않습니다.두 데이터 모두 정의되지 않았습니다.
같은 이벤트에서 2개의 payload를 전달하려면 어떻게 해야 합니까? (console.logs 위치에 payload를 찾을 수 있습니다.)
1개의 payload(id 또는 량)를 넣었을 때 올바른 값을 얻었지만 2개의 payload를 주려 할 때는 그렇지 않습니다.
잘 부탁드립니다!
여기 내 컴포넌트가 있습니다.
<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: {}
})
질문 1
은 두 가지합니다. 즉, 두 가지 속성을 가진 오브젝트입니다.amount
★★★★★★★★★★★★★★★★★」id
그러나 오브젝트를 전달하지 않고 두 개의 다른 변수를 전달하고 있습니다.updateShoppingCart(quantity, id)
.
템플릿에서는 대신 다음과 같이 호출합니다.
updateShoppingCart({ amount: quantity, id }); // Note the object brackets
이름을 ""로 변경합니다.quantity
에서 ★★★★★★★★★★★에amount
★★★★★★★★★★★★★★★★★★★★★★★★★★★
updateShoppingCart({ amount, id });
질문 2(파괴 사용)
변환:
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)
}
언급URL : https://stackoverflow.com/questions/60317949/add-multiple-payloads-on-vuex
반응형
'programing' 카테고리의 다른 글
Vue.js의 옵션 파라미터 (0) | 2022.08.08 |
---|---|
Vue 3에서 Composition API를 사용해야 합니까? 아니면 Vue 2 방식으로 작업을 수행할 수 있습니까? (0) | 2022.08.08 |
VIM에서 C 프로그램을 실행하려면 어떻게 해야 하나요? (0) | 2022.08.08 |
v-for of Vuejs의 구성 요소에서 내보낸 이벤트를 처리하는 방법 (0) | 2022.08.08 |
VueJ가 .native 이벤트 수식자를 도입하는 이유이 사용 사례는 무엇입니까? - Vue.js (0) | 2022.08.08 |