Vuex: Mutation occurs but state does not change - vuetify.js

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.

Answer 1

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.