Vuex - 不要變異突變處理

Question

外vuex商店狀態爲什麼會出現這樣的錯誤：

Error [vuex] Do not mutate vuex store state outside mutation handlers.

是什麼意思？

發生在我嘗試輸入編輯輸入文件時。

頁/待辦事項/ index.vue

<template> 
    <ul> 
    <li v-for="todo in todos"> 
     <input type="checkbox" :checked="todo.done" v-on:change="toggle(todo)"> 
     <span :class="{ done: todo.done }">{{ todo.text }}</span> 
     <button class="destroy" v-on:click="remove(todo)">delete</button> 

     <input class="edit" type="text" v-model="todo.text" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)"> 

    </li> 
    <li><input placeholder="What needs to be done?" autofocus v-model="todo" v-on:keyup.enter="add"></li> 
    </ul> 
</template> 

<script> 
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 && 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() 
     } 
    } 
    }, 
} 
</script> 

<style> 
.done { 
    text-decoration: line-through; 
} 
</style> 

店/ todos.js

export const state =() => ({ 
    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 
    } 
} 

任何想法我怎麼能解決這個問題？

Answer 1

在一塊屬於Vuex的狀態上使用v模型可能有點棘手。

，你已經使用v-model上todo.text這裏：

<input class="edit" type="text" v-model="todo.text" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)"> 

使用:value閱讀價值和v-on:input或v-on:change執行執行明確Vuex突變處理

這個問題是內部的突變的方法在這裏處理：https://vuex.vuejs.org/en/forms.html