Vuex Application Structure

我尝试将Vue2.0js项目的代码改成Vuex的application structure结构，但是遇到了一点问题。

错误是在添加新的todo时，在input中改变newTodo的title会报错

说是不能再mutation范围外修改state，但是我不知道应该怎么改。

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import todo from './modules/todo'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
    actions,
    getters,
    modules: {
        todo
    },
    strict: debug
})

我把这里strict:debug去掉之后错误就消失了，但是我还是想找出错误在哪里。

todo.js

const state = {
    all: [],
    newTodo: {id:null, title:'', completed:false}
}

// getters
const getters = {
    allTodos: state => state.all,
    newTodo: state => state.newTodo
}

TodoForm.vue

import { mapGetters } from 'vuex'
    export default{
        computed: mapGetters({
            newTodo: 'newTodo'
        }),
        methods:{
            addTodo(newTodo) {
                this.$store.dispatch('addTodo',newTodo)
            },
        }
    }