Vuex는 변환 핸들러 외부의 vuex 저장소 상태를 변환하지 않음 - Vuetify

Vuex는 변환 핸들러 외부의 vuex 저장소 상태를 변환하지 않음 - Vuetify

저는 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
  }
}

outsize를 클릭했을 때 상태를 직접 수정하려고 했습니다.변환으로 모피화할 필요가 있습니다.한 가지 방법은 계산된 속성을 생성하여 다음과 같이 설정하는 것입니다.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");
    }
  }
};

언급URL : https://stackoverflow.com/questions/61943364/vuex-do-not-mutate-vuex-store-state-outside-mutation-handlers-vuetify