title: Vuex - Do not mutate vuex store state outside mutation handlers
body: <p>Why do I get this error:</p>
  <blockquote>
  <p>Error [vuex] Do not mutate vuex store state outside mutation handlers.</p>
  </blockquote>
  <p><strong>What does it mean?</strong></p>
  <p>It happens when I try to type in the <strong>edit input file</strong>.</p>
  <p><code>pages/todos/index.vue</code></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;ul&gt;
      &lt;li v-for=&quot;todo in todos&quot;&gt;
        &lt;input type=&quot;checkbox&quot; :checked=&quot;todo.done&quot; v-on:change=&quot;toggle(todo)&quot;&gt;
        &lt;span :class=&quot;{ done: todo.done }&quot;&gt;{{ todo.text }}&lt;/span&gt;
        &lt;button class=&quot;destroy&quot; v-on:click=&quot;remove(todo)&quot;&gt;delete&lt;/button&gt;
  
        &lt;input class=&quot;edit&quot; type=&quot;text&quot; v-model=&quot;todo.text&quot; v-todo-focus=&quot;todo == editedTodo&quot; @blur=&quot;doneEdit(todo)&quot; @keyup.enter=&quot;doneEdit(todo)&quot; @keyup.esc=&quot;cancelEdit(todo)&quot;&gt;
  
      &lt;/li&gt;
      &lt;li&gt;&lt;input placeholder=&quot;What needs to be done?&quot; autofocus v-model=&quot;todo&quot; v-on:keyup.enter=&quot;add&quot;&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapMutations } from 'vuex'
  
  export default {
    data () {
      return {
        todo: '',
        editedTodo: null
      }
    },
    head () {
      return {
        title: this.$route.params.slug || 'all',
        titleTemplate: 'Nuxt TodoMVC : %s todos'
      }
    },
    fetch ({ store }) {
      store.commit('todos/add', 'Hello World')
    },
    computed: {
      todos () {
        // console.log(this)
        return this.$store.state.todos.list
      }
    },
    methods: {
      add (e) {
  
        var value = this.todo &amp;&amp; this.todo.trim()
        if (value) {
          this.$store.commit('todos/add', value)
          this.todo = ''
        }
  
      },
      toggle (todo) {
        this.$store.commit('todos/toggle', todo)
      },
      remove (todo) {
        this.$store.commit('todos/remove', todo)
      },
  
      doneEdit (todo) {
        this.editedTodo = null
        todo.text = todo.text.trim()
        if (!todo.text) {
          this.$store.commit('todos/remove', todo)
        }
      },
      cancelEdit (todo) {
        this.editedTodo = null
        todo.text = this.beforeEditCache
      },
    },
    directives: {
      'todo-focus' (el, binding) {
        if (binding.value) {
          el.focus()
        }
      }
    },
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  .done {
    text-decoration: line-through;
  }
  &lt;/style&gt;
  </code></pre>
  <p><code>stores/todos.js</code></p>
  <pre class="lang-js prettyprint-override"><code>export const state = () =&gt; ({
    list: []
  })
  
  export const mutations = {
    add (state, text) {
      state.list.push({
        text: text,
        done: false
      })
    },
    remove (state, todo) {
      state.list.splice(state.list.indexOf(todo), 1)
    },
    toggle (state, todo) {
      todo.done = !todo.done
    }
  }
  </code></pre>
  <p>Any ideas how I can fix this?</p>