Nuxt/todo

template>
    div>
        ul>
            li v-for="todo in todos">
                input type="checkbox" :checked="todo.done" @change="toggle(todo)" />
                span>{{ todo.text }}/span>
            /li>
        /ul>
        input placeholder="追加" @keyup.enter="addTodo" />
    /div>
/template>

script>
import { mapMutations } from "vuex"

export default {
    computed: {
        todos(){
            return this.$store.state.todos.list
        }
    },
    methods: {
        addTodo(e){
            this.$store.commit("todos/add", e.target.value)
        },
        ...mapMutations({
            toggle: "todos/toggle"
        })
    }
}
/script>
	

export const state = () => ({
    list: []
})

export const mutations = {
    add(state, text){
        state.list.push({
            text: text,
            done: false
        })
    },
    toggle(state, todo){
        todo.done = !todo.done
    }
}