Vuex: Mutation occurs but state does not change

Question

I'm Using Nuxt + Vuetify for a eCommerce app.

There are two separate components - Header and Cart.

The Header component contains a button which on click will toggle the cart visibility.

<template>
  <v-app-bar>
    <v-btn @click="$store.commit('toggleCart')" icon>
      <v-icon>mdi-cart</v-icon>
    </v-btn>
  </v-app-bar>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "Header",
  methods: {
    ...mapState(["cartOpen"])
  }
};
</script>

In the Cart component, I'm using Vuetify's drawer component which will be hidden by default and shown on click of the button in header.

<template>
  <v-navigation-drawer v-model="cartOpen" app clipped right>Products in Cart</v-navigation-drawer>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Cart",
  methods: {
    ...mapState(["cartOpen"])
  }
};
</script>

This is my store index.js file

export const state = () => ({
  cartOpen: false
})

export const mutations = {
  toggleCart(state, cartOpen) {
    return cartOpen = !cartOpen;
  }
}

Now when I click on the button, a mutation happens in the develoer tools but the state is always false. Any help is appreciated.

have you tried to use the state object in your mutation? state.cartOpen = !state.cartOpen — jumper85

webprogrammer webprogrammer · Accepted Answer · 2020-01-22T18:20:07

The better way is to modify your mutation like this:

export const mutations = {
  toggleCart(state) {
    state.cartOpen = !state.cartOpen;
  }
}

You shouldn't return anything from mutation, just set new value to state property.

As alternative:

You call your mutation without payload. You should add payload to your commit method:

<v-btn @click="$store.commit('toggleCart', cartOpen)" icon>

But you should also add cartOpen to you data which is not so good.

Vuex: Mutation occurs but state does not change

1 Answers