调试控制台中的错误:";不要在突变处理程序之外突变vuex存储状态"

Question

我在控制台中只有在调试模式下才有一个警告，它是：

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."
(found in <Root>)

我不知道发生了什么。它只出现在单击按钮事件上，以显示详细信息。。你可以在下面找到代码：

<template>
<section>
<!--Header-->
<h1 class="section-title">Security Groups</h1>
<!--Table-->
<b-table small hover show-empty v-if="securityGroupsLoading === false" head-variant="dark" :items="securityGroups"
:fields="fields">
<template v-slot:cell(details)="row">
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
{{ row.detailsShowing ? 'Hide' : 'Show'}} Addresses
</b-button>
</template>
<template v-slot:row-details="row">
<b-card>
<b-row class="mb-2">
<div v-if="row.item.addresses.length !== 0"> {{ row.item.addresses }} </div>
</b-row>
</b-card>
</template>
</b-table>
<loader v-if="securityGroupsLoading === true" />
</section>
</template>
<script>
import { mapState } from 'vuex'
import Loader from '@/components/Loader.vue'
export default {
name: 'SecurityGroups',
components: {
Loader,
},
props: {
scopeId: {
type: String,
required: true,
},
},
data: () => ({
fields: [
{ key: 'name', sortable: true },
{ key: 'type', sortable: true },
{ key: 'description', sortable: true },
{ key: 'tag_association_type', sortable: true },
{ key: 'tags', sortable: true },
{ key: 'usable', sortable: true },
{ key: 'details', sortable: true },
],
}),
computed: {
...mapState({
securityGroups: state => state.securityGroups.groups,
securityGroupsLoading: state => state.securityGroups.status.items === 'fetching',
}),
},
}
</script>
<style lang="scss" scoped>
.overflowed {
max-height: 150px;
overflow: auto;
}
</style>

隐藏/显示按钮

我知道这只是一个警告，我可以删除这个警告切换"；严格的"；选项设置为false。但我会理解我该如何解决这个问题。

提前感谢您的帮助。Sereg。

Answer 1

您的应用程序运行良好吗
如果是这样，那么您的vuex配置如下所示：

export default new Vuex.Store({
actions,
getters,
state,
mutations,
modules,
// strict: debug,
})

也许你可以删除restrict配置