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>

存储/索引.js

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

Answer 1

当您单击 outsise 时，您尝试直接修改状态。您需要使用突变对其进行修改，一种方法是创建一个计算属性并将其设置为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");
}
}
};