Vuex -이 오류 이유는 무엇입니까 돌연변이 핸들러

Question

외부 vuex 저장 상태를 변이하지 마십시오

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

은 무엇을 의미 하는가를?

입력 파일을 입력 할 때 발생합니다. 나는이 문제를 해결할 수있는 방법을

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

어떤 아이디어 todos.js

페이지

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

저장/일하러/index.vue /?

Answer 1

Vuex에 속한 상태의 조각에 v-model을 사용하는 것은 약간 까다로울 수 있습니다.

당신은 여기 todo.text에 v-model을 사용하고 있습니다 : 명시 적 Vuex 돌연변이 핸들러이 문제가

내부의 돌연변이를 수행하는 방법을 실행하는 가치와 v-on:input 또는 v-on:change을 읽을 수

<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 여기 취급 : https://vuex.vuejs.org/en/forms.html