Error vuex mutation outside of store handler

Question

In my program, I have a form. This form has for this example two checkboxes, and a submit button. When you click a checkbox it will save it to a variable, which gets pushed to my vuex store, when you click the button. This part works great.

I can also select and unselect the checkboxes as many times as I want, before I hit submit.

However, if I go back to the form, and click either of the checkboxes, then it throws this error: Error: [vuex] do not mutate vuex store state outside mutation handlers. . And so that is where I am stuck. I have looked at others who have asked the same question, and the general consensus is that either I am using a v-model or I have to take it out of strict mode for vuex. I do not have any v-models and I would like to leave it in strict mode.

this is the form and submit button.

<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>

This is not the full file but has the relevant parts of my markup.

The following is the code, that is triggered when a user selects a checkbox and the submit button:

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

I think whats happening is that when commiting, you're binding filteredTools to your store, and then mutating it in this line:

this.filteredTools = copy;