Vuex：发生突变但状态没有改变答案

【问题标题】：Vuex: Mutation occurs but state does not changeVuex：发生突变但状态没有改变
【发布时间】：2020-01-22 17:21:38
【问题描述】：

我正在将 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;
  }
}

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

【问题讨论】：

您是否尝试过在您的突变中使用状态对象？ state.cartOpen = !state.cartOpen

标签： vuetify.js nuxt.js

【解决方案1】：

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

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

您不应该从突变中返回任何东西，只需为 state 属性设置新值。

作为替代：

您在没有有效负载的情况下调用您的突变。您应该将有效负载添加到您的提交方法：

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

但是您还应该将cartOpen 添加到您不太好的数据中。

【讨论】：