title: How to set up parameters and arguments in Vuex mutations
body: <p>I am building a todo list app using Vue.js, Vuex, and Firebase. The app appears to work properly in that the Store file successfully manages the retrieval and rendering of the inputted todo items (to and from firestore). However, I still have a question about setting up parameters in Vuex. The REMOVE_TODO function in mutations (see store.js) seems to require two arguments, even though "id" is the only argument referenced in the actual code of the function. In other words, if I take out the initial argument, (in this case "state") then console will return an error that reads: "Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: a custom Object object". My question is: Why is this REMOVE_TODO function required to have two arguments to function properly, if the "id" argument is the only one actually used in the function? Why is having the other argument necessary? Here is my code below. Thanks! </p>
  
  <p>app.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app" class="container"&gt;
      &lt;input class="form-control" :value="newTodo" @change="getTodo" placeholder="I need to..."&gt;
      &lt;button class="btn btn-primary" @click="addTodo"&gt;Add New Post&lt;/button&gt;
      &lt;ul class="list-group"&gt;
          &lt;li class="list-group-item" v-for="todo in this.$store.getters.getTodos" :key="todo.id"&gt;
              {{todo.title}}
              &lt;div class="btn-group"&gt;
                  &lt;button type="button" @click="remove(todo.id)" class="btn btn-default btn-sm"&gt;
                  &lt;span class="glyphicon glyphicon-remove-circle"&gt;&lt;/span&gt; Remove
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    beforeCreate: function() {
      this.$store.dispatch('setTodo')
    },
    methods: {
      getTodo(event) {
        this.$store.dispatch('getTodo', event.target.value)
      },
      addTodo() {
        this.$store.dispatch('addTodo')
        this.$store.dispatch('clearTodo')
      },
      remove(id){
        this.$store.dispatch('removeTodo', id)
      }
    },
    computed: {
      newTodo() {
        return this.$store.getters.newTodo
      },
      todos(){
        return this.$store.getters.todos
      }
    }
  }
  &lt;/script&gt;
  &lt;style&gt;
  body {
    font-family: Helvetica, sans-serif;
  }
  li {
    margin: 10px;
  }
  &lt;/style&gt;
  
  </code></pre>
  
  <p>store.js</p>
  
  <pre><code>import Vue from 'vue'
  import Vuex from 'vuex'
  import db from '../firebase'
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
    state: {
      todos: [],
      newTodo: '',
      errors: ''
    },
    mutations: { //syncronous, committed
      GET_TODO: (state, todo) =&gt; {
        state.newTodo = todo
      },
      ADD_TODO: state =&gt; {
        db.collection('items').add({
          title: state.newTodo,
          created_at: Date.now(),
        }).then(function(){
          console.log('Document successfully added')
        })
        .catch((error) =&gt; {
          this.errors = error
        })
      },
      REMOVE_TODO: (state, id) =&gt; {
         if (id) {
           db.collection("items").doc(id).delete().then(function() {
             console.log('Document successfully deleted')
           })
           .catch((error) =&gt; {
             this.errors = error
           })
         } else {
           this.errors = 'Invalid ID'
         }
      },
      CLEAR_TODO: state =&gt; {
        state.newTodo = ''
      },
      SET_TODO: state =&gt; {
        let todos = []
        db.collection('items').orderBy('created_at').onSnapshot((snapshot) =&gt; {
          todos = []
          snapshot.forEach((doc) =&gt; {
            todos.push({ id: doc.id, title: doc.data().title })
          })
          state.todos = todos
        })
      }
    },
    actions: { //asyncronous, dispatched
      getTodo: (context, todo) =&gt; {
        context.commit('GET_TODO', todo)
      },
      addTodo: context =&gt; {
        context.commit('ADD_TODO')
      },
      removeTodo: (context, id) =&gt; {
        context.commit('REMOVE_TODO', id)
      },
      clearTodo: context =&gt; {
        context.commit('CLEAR_TODO')
      },
      setTodo: context =&gt; {
        context.commit('SET_TODO')
      }
    },
    getters: {
      newTodo: state =&gt; state.newTodo,
      getTodos: state =&gt; {
        return state.todos
      }
    }
  })
  
  </code></pre>