Vue JS Component implementing a simple dispatch action for vuex store

Todo.vue

<template>
  <div>
    <input type="text" v-model="todo" name="todo" id="addtodo"/>
    <button @click="addTodo">Add New Todo</button>
  </div>
</template>
<script>
export default {
    name: "Todo",
    data() {
      return {
        todo: "Buy milk at the grocery store" // default value for the input field
      }
    },
    methods: {
      addTodo() {
        this.$store.dispatch("addTodoItem", this.todo)
      }
    }
}
</script>