J'utilise Nuxt + Vuetify pour une application de commerce électronique.

Il existe deux composants distincts : l'en-tête et le panier.

Le composant d'en-tête contient un bouton qui, lors d'un clic, fera basculer la visibilité du panier.

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

Dans le composant Cart, j'utilise le composant tiroir de Vuetify qui sera masqué par défaut et affiché en cliquant sur le bouton dans l'en-tête.

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

Ceci est le fichier index.js de mon magasin

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

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

Maintenant, lorsque je clique sur le bouton, une mutation se produit dans les outils de développement mais l'état est toujours false. Toute aide est appréciée.

0
nuxt-user 22 janv. 2020 à 20:21

1 réponse

Meilleure réponse

La meilleure façon est de modifier votre mutation comme ceci :

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

Vous ne devriez rien renvoyer de la mutation, définissez simplement une nouvelle valeur sur la propriété de l'état.

Comme alternative:

Vous appelez votre mutation sans charge utile. Vous devez ajouter une charge utile à votre méthode de commit :

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

Mais vous devriez également ajouter cartOpen à vos données, ce qui n'est pas si bon.

0
webprogrammer 22 janv. 2020 à 18:34