title: Vuex: How to properly call action?
body: <p>I'm having trouble understanding how to pass actions with payloads using Vuex. I know i need a mutation to change the state, and that its best practice to use an action to dispatch the mutation. Not sure how I call the action and pass in a parameter though. Whenever I try this I get the error: </p>
  
  <blockquote>
    <p>"Uncaught TypeError: Cannot read property 'isComplete' of undefined"</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Store.js
  const mutations = {
    completeTodo: function (state, todo) {
      console.log(todo)
      todo.isComplete = todo.isComplete || false
      state.toggleAll = false
    }
  }
  
  const actions = {
    completeTodo: ({commit}) =&gt; commit('completeTodo')
  }
  
  //Todo.vue
  
   methods: {
    ...mapActions([
      'completeTodo'
    ])
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;input type="checkbox" name="isCompleted" " v-on:change="completeTodo(todo)" class="todoCheck" /&gt;</code></pre>
  </div>
  </div>
  </p>