Vuex: мутация происходит, но состояние не меняется - PullRequest
Новая
       5

Vuex: мутация происходит, но состояние не меняется

0 голосов
/ 22 января 2020

Я использую Nuxt + Vuetify для приложения электронной коммерции.

Существует два отдельных компонента - заголовок и корзина.

Компонент заголовка содержит кнопку, которая при нажатии переключает корзину. видимость. 

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

В компоненте «Корзина» я использую компонент ящика Vuetify, который по умолчанию будет скрыт и показан по нажатию кнопки в заголовке. 

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

Это мой магазин index. js file 

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

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

Теперь, когда я нажимаю кнопку, происходит мутация в инструментах разработчика, но состояние всегда false. Любая помощь приветствуется.

1 Ответ

0 голосов
/ 22 января 2020

Лучший способ - изменить вашу мутацию следующим образом: 

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

Вы не должны ничего возвращать из мутации, просто установите новое значение для свойства состояния.

В качестве альтернативы:

Вы вызываете свою мутацию без полезной нагрузки. Вы должны добавить полезную нагрузку к вашему методу фиксации: 

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

Но вы также должны добавить cartOpen к вам данные, которые не так хороши.

...