Question

我正在为电子商务应用程序使用Nuxt + Vuetify。

有两个单独的组件-标头和购物车。

Header组件包含一个按钮，单击该按钮将切换购物车的可见性。

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

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

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

现在，当我单击按钮时，develoer工具中会发生突变，但状态始终为false。任何帮助表示赞赏。

Answer 1

更好的方法是像这样修改您的突变：

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

您不应从突变中返回任何内容，只需将新值设置为state属性。

作为替代：

您称没有有效载荷的突变。您应该将有效负载添加到提交方法中：

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

但是您还应该向数据中添加cartOpen，效果不是很好。

Vuex：发生突变，但状态不变

1 个答案: