我尝试使用vuex制作购物车vue组件和“添加到购物车”按钮。当项目不在购物车中时,我显示按钮。当按下按钮时-项目将添加到购物车中,并由购物车中的数量替换(用于测试)。
现在我需要2次按钮才能显示数量。首次点击时,数据已添加到购物车中。但仅在第二次单击中它才被替换。我在哪里犯错?我该怎么办?
我的Vue组件
<template>
<div>
<div v-if="productInCart">
{{productInCart.quantity}}
</div>
<div v-else>
<button type="button" class="btn btn-primary" @click="add()">
To Cart
</button>
</div>
</div>
</template>
<script>
import {mapActions, mapGetters} from 'vuex';
export default {
name: "Test",
props: [
'data'
],
created: function() {
this.product = JSON.parse(this.data);
},
data() {
return {
product: null,
}
},
computed: {
...mapGetters({
cartItem: 'cartItem'
}),
productInCart: function () {
return this.$store.getters.cartItem(this.product.id)
},
},
methods: {
...mapActions({
addToCart: 'addToCart',
}),
add() {
this.addToCart({
'id': this.product.id,
'name': this.product.name,
'price': this.product.price,
'quantity': 1,
'attributes': null
})
},
},
}
</script>
我的vuex商店
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
items: {
303: {id: 303, name: 'p3', quantity: 10, price: 7, attributes: null},
304: {id: 304, name: 'p4', quantity: 15, price: 8, attributes: null},
},
},
getters: {
cartItems: state => {
return state.items;
},
cartItem: state => row => {
return state.items[row];
},
},
mutations: {
addToCart(state, item) {
state.items[item.id] = item;
},
removeFromCart(state, item) {
if (item.id in state.items){
Vue.delete(state.items, item.id);
}
},
},
actions: {
addToCart(store, item) {
store.commit('removeFromCart', item);
if (item.quantity > 0) {
store.commit('addToCart', item);
}
},
removeFromCart(store, item) {
store.commit('removeFromCart', item);
},
},
});
答案 0 :(得分:0)
Object Change Detection Caveats中的问题和解决方案。
addToCart(state, item) {
Vue.set(state.items, item.id, item);
},