vuex unknown action type: addTodo

Question

Hi I am getting the Error like this

[vuex] unknown action type: addTodo

I am new to Vue js and now i am learing so could please help me to resolve this issue.

Code is like this

store/index.js

 import { createStore } from 'vuex'

export default createStore({
  state: {
    todos: [
      {
        id: 1,
        title: 'One'
      },
      {
        id: 2,
        title: 'Two'
      },
      {
        id: 3,
        title: 'Three'
      },
    ]
  },
  getters: {
    allTodos: (state) => state.todos,
  },
  mutations: {
    addTodo({ commit }, todo){
      commit("add_todo", todo)
    }
  },
  actions: {
    add_todo(state, todo){
      state.todos.push(todo)
      console.log(todo);
    }
  },
  modules: {
  }
})

and TodoInput.vue code is

  <template>
    <div>
        <div class="row">
        <input v-model="todoText" class="col form-control mx-2" type="text" />
        <button @click="addTodo(todoText)" class="btn btn-primary">Add List</button>
        </div>
        
    </div>
</template>

<script>
import { mapActions } from 'vuex'
export default{
name: 'TodoInput',
data(){
return{
    todoText: ''
}
},
methods:{
    ...mapActions(["addTodo"])
}
}
</script>

How can I solve above issue ?

Answer 1

Here make the below given changes in your store/index.js file:

mutations: {
    add_todo: (state, todo) => state.todos.push(todo),
},

actions: {
    addTodo({ commit }, todo){
        commit("add_todo", todo)
    }
},