商店处理程序之外的错误 vuex 突变

Question

在我的程序中，我有一个表格。对于此示例，此表单有两个复选框和一个提交按钮。当您单击一个复选框时，它会将其保存到一个变量中，当您单击该按钮时，该变量将被推送到我的 vuex 存储中。这部分效果很好。

我还可以 select 和取消 select 复选框，次数不限，然后点击提交。

但是，如果我返回表单并单击任一复选框，则会抛出此错误： Error: [vuex] do not mutate vuex store state outside mutation handlers.。这就是我被困的地方。我看过其他人问过同样的问题，普遍的共识是我正在使用 v-model 或者我必须将其从 vuex 的严格模式中取出。我没有任何 v-models，我想将其保留在严格模式下。

这是表单和提交按钮。

<v-expansion-panel class='panelButton'>
        <v-expansion-panel-header class='searchCardTitle'>Category of tool</v-expansion-panel-header>
        <v-expansion-panel-content>
          <v-checkbox dense hide-details=true v-for="tools in toolCategory" :key=tools :label=tools  @click="addMobileFilter(tools)" class="checkboxText"/>
        </v-expansion-panel-content>
      </v-expansion-panel>
     <v-expansion-panel class='panelButton'>
        <v-expansion-panel-header class='searchCardTitle'>Strategies</v-expansion-panel-header>
        <v-expansion-panel-content>
          <v-checkbox dense hide-details=true v-for="(tools,index) in toolStrategies" :key=tools :label=tools :value=toolStrategiesValues[index]  @click="addMobileFilter(toolStrategiesValues[index])" class="checkboxText"/>
        </v-expansion-panel-content>
<v-card-actions class="justify-center">
    <v-btn color="#699ad6" @click="updateMobileFilter()" class='white--text' style="margin 1rem 0 2rem 0">Apply</v-btn>
    </v-card-actions>

这不是完整文件，但包含我标记的相关部分。

以下是代码，当用户select选中复选框和提交按钮时触发：

data() {
        return {
            tools: [],
            filteredTools:[],
            mobileFilters:[],
}
}
methods: {
        updateFilter: function(filter) {
            console.log(filter);
            this.$store.commit('populateFilterList',filter);
        },
        addMobileFilter: function(filter) {
            if(this.filteredTools.includes(filter)){
                const copy = this.filteredTools;
                const index = this.filteredTools.indexOf(filter);
                copy.splice(index, 1);
                this.filteredTools = copy;
            } else {
                this.filteredTools.push(filter);
            }
        },
        updateMobileFilter: function(){
            this.$store.commit('populateFilterList',this.filteredTools);
            this.$emit('dialogStatus',false);
        }
    }

Answer 1

我认为发生的事情是，在提交时，您将过滤后的工具绑定到您的商店，然后在这一行中改变它：

this.filteredTools = copy;

商店处理程序之外的错误 vuex 突变

Error vuex mutation outside of store handler

javascript

vue.js

vuex