title: Vuex: Skipping Action and committing Mutation directly from Component
body: <p>In vue.js app, using vuex as state management store, I need to simply change the value of a property in vuex. For this I can follow two methods:</p>
  
  <ol>
  <li><p>Dispatch an <code>action</code> method, which will further commit <code>mutation</code>, which eventually will change the state.</p></li>
  <li><p>The second method is to commit the <code>mutation</code> directly from the component and the mutation method will then change the state.</p></li>
  </ol>
  
  <p>Currently, I'm using first method like this:</p>
  
  <p><strong>In Component:</strong></p>
  
  <p><code>this.$store.dispatch('updateNotice', 'This is some notice')</code></p>
  
  <p><strong>In Actions:</strong></p>
  
  <p><code>updateNotice ({state, getters, commit}, payload) {
     commit('UPDATE_NOTICE', payload)
   }</code></p>
  
  <p><strong>In Mutations:</strong></p>
  
  <p><code>UPDATE_NOTICE (state, payload) {
     state.notice = payload
  }</code></p>
  
  <p>As you might have noticed, I'm using the <code>action</code> method simply to commit a <em>single</em> mutation, without any other logic or <em>async</em> functionality.</p>
  
  <p>My question is, in this case, should I not directly commit the mutation from the component itself? What is the best practice? Since using <code>action</code> method in this simple case seems verbose and serve no specific purpose.</p>
  
  <p>Is there any reason that I should always <code>commit</code> actions from a component?
   Afterall, in vuex the <code>...mapMutations()</code> have some reason to exist.</p>