Vuex do not mutate vuex store state outside mutation handlers - Vuetify

Question

I am building a nuxt app with Vuetify. My use case is that i want to implement a global bottom-sheet. My code below works fine until when i click outside the sheet and it throws an error. What am I missing below?

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

What i have tried so far.

<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

When you clicked outsise, you tried to modify the state directly. You need to mofify it with a mutation, one way is to create a computed property and set it to 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");
    }
  }
};