Vuex不会在变异处理程序之外变异vuex存储状态-Vuetify

Question

我正在使用Vuetify构建nuxt应用。我的用例是我想实现全局底表。我的下面的代码可以正常工作，直到我在工作表外单击并引发错误为止。我在下面缺少什么？

Error: [vuex] do not mutate vuex store state outside mutation handlers.

到目前为止我尝试过的。

<template>
  <div>
    <v-bottom-sheet v-model="$store.state.sheet">
      <v-card>
        <v-card-title>Hi there</v-card-title>
        <v-card-subtitle>This is a demo sheet</v-card-subtitle>
      </v-card>
    </v-bottom-sheet>
    <v-btn class="mt-5" @click="openSheet">Sheet</v-btn>
  </div>
</template>
<script>
export default {
  methods: {
    openSheet() {
      this.$store.commit("openSheet");
    }
  }
};
</script>

Store / index.js

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

export const mutations = {
  openSheet(state){
    state.sheet = !state.sheet
  }
}

Answer 1

[当您单击超出范围时，您尝试直接修改状态。您需要通过突变来优化它，一种方法是创建一个计算属性并将其设置为v-model：

<template>
  <div>
    <v-bottom-sheet v-model="sheet">
      <v-card>
        <v-card-title>Hi there</v-card-title>
        <v-card-subtitle>This is a demo sheet</v-card-subtitle>
      </v-card>
    </v-bottom-sheet>
    <v-btn class="mt-5" @click="openSheet">Sheet</v-btn>
  </div>
</template>
<script>
export default {    
  computed: {
    sheet: {
      get () {
        return this.$store.state.sheet;
      },
      set (value) {
        this.$store.commit("openSheet");
      }
    }
  },
  methods: {
    openSheet() {
      this.$store.commit("openSheet");
    }
  }
};