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)
            },
        }
    }
JellyBool
修改的评论也不能少于六个字哦!
hard88 回复 JellyBool
修改的评论也不能少于六个字哦!
hard88
修改的评论也不能少于六个字哦!