Vuex state returning incorrect value

Question

I'm having an issue where I am getting an unexpected value from the store.

I have a component with one method:

methods: {
    setProduct(product) {
        this.$store.commit('basket/empty');
    
        console.log(this.$store.state.basket.items);
  
        this.$store.commit("basket/addToBasket", {
            id: product.id
        });
    },
},

It simply empties the basket and adds a new product, thus one product can exist in the basket at any one time.

My issue is that the console log is returning a product.

Rather than an empty array. If I remove

this.$store.commit("basket/addToBasket", {
    id: product.id
});

it is returns

Please can someone tell me why the console.log is returning items, when the commit hasn't taken place yet?

Basket.js

const state = {
    items: []
};

const getters = {};
const actions = {};

const mutations = {
    empty (state) {
        state.items = [];
    },
    addToBasket (state, product) {
        state.items.push(product);
    },
};

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
};

Observer in console observes the changes and is refreshed when you add an item. So, everything looks fine — Maria Piaredryj
– Maria Piaredryj, Commented Feb 22, 2021 at 15:29

Dan · Accepted Answer · 2021-02-22 15:29:30Z

1

The developer console is able to update the data when logging a reference variable, like an Array or Object.

When you click to expand in the console, it shows you the variable as it is at the time you click the console, not at the time it was logged. That means it does not necessarily reflect the value of the items variable at the time it was logged.

In this case, the items array is empty when the log happens, but by the time you click to expand the properties, the array contains the new id.

Here is a demo that illustrates this a little more.

answered Feb 22, 2021 at 15:29

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuex state returning incorrect value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related