Vue component toggle button with vuex store

Question

I try make cart vue component and buttons "add to cart" component using vuex. When item is not in cart I show button. When push button - item will add to cart and will be replaced by quantity in cart (for testing).

Now I need push button 2 times to display quantity. Data added in cart on first click. But only in second click it replaced. Where I make mistake? What can I do?

My vue component

<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>

My vuex store

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);
        },
    },
});

@MahmudAdam because in futere I will be update quantity. And it is easy to remove and add new data than create new action and etc. — autumnrustle

autumnrustle autumnrustle · Accepted Answer · 2018-08-20T08:51:45

Poblem and solution in Object Change Detection Caveats.

addToCart(state, item) {
    Vue.set(state.items, item.id, item);
},

Vue component toggle button with vuex store

1 Answers