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

[Epo]

I use a List for rendering my todos, which are managed with vuex. Im not sure why i got this error.

 <q-list inset-separator>
      <q-item
        v-for="(todo, key, index) in todos"
        :key="todo.id"
        name="myTodos">
        <q-item-side>
          <q-checkbox color="secondary" v-model="todo.done" @change="changeTodo(todo.id)" />
        </q-item-side>
        <q-item-main :label="todo.todo" />
        <q-item-side right icon="more_vert">
          <q-popover ref="popover">
            <q-list link>
              <q-item @click="removeTodo(todo.id)">
                <q-item-main label="Delete" />
              </q-item>
            </q-list>
          </q-popover>
        </q-item-side>
      </q-item>
    </q-list>

Here is my method which calls the vuex action:

 changeTodo (todo) {
   this.selectedTodo = this.todos[todo]
   this.updateTodo(this.selectedTodo)
 },

Here i get the state:

 computed: {
    ...mapState({
      'todos': state => state.todos.todos
   })
  },

Vuex and app works fine and also the state is updated but i got this error too.

[Epo]

The problem is in v-model=“todo.done”. What did i wrong?

[Epo]

I replaced

 v-model="todo.done"

with

  :value="todo.done".

Now it works fine. But when do i use/need v-model?

[Muniraj]

This post is deleted!

[Mirzo]

I am having the same problem but :value didn’t help. Can anyone help me please???
I have two errors when i click checkboxes:

1. [Vue warn]: Error in callback for watcher “function () { return this._data.$$state }”: “Error: [vuex] do not mutate vuex store state outside mutation handlers.”
2. warn @ vue.runtime.esm.js?2b0e:619 Error: [vuex] do not mutate vuex store state outside mutation handlers.

[Mirzo]

This post is deleted!

[Oliver_Max]

I have same problem. Did you solve it?

[s_sharunov]

Hi guys.
I had the same problem - when one clicks directly on the checkbox field the error appears. My solution is: add a class to the tag of q-checkbox, i.e.

<q-checkbox v-model=“todo.done” class=“no-pointer-events” />

Thank you to youtube channel of Danny Connell. He provides his code-base, where the solution was found

[Muhammad Amin]

Hello to everyone,
Look at here:
https://stackoverflow.com/questions/46044276/vuex-do-not-mutate-vuex-store-state-outside-mutation-handlers
https://vuex.vuejs.org/guide/forms.html
https://markus.oberlehner.net/blog/form-fields-two-way-data-binding-and-vuex/
https://github.com/maoberlehner/vuex-map-fields
http://shzhangji.com/blog/2018/04/17/form-handling-in-vuex-strict-mode/

[Lou Rectoret]

What is really happening is that you’re referencing your store’s todos to components’s todos to.
You should clone the array instead:

I found myself in the same situation but with members, and this solved the issue:

 const clonedMembers: [...this.formData.members]
// then you call the mutation with the clone

Yes… is a pain in the ass.

I think this is solved in Vue3.