title: Vuex mutation calling another mutation or a synchronous action instead?
body: <p>I am learning Vuex and have encountered a problem about structuring my app.</p>
  
  <p>Consider these pieces of code, all of them doing the same thing:</p>
  
  <p>Example #1:</p>
  
  <pre><code>mutations: {
    add: function(state, employee) {
      state.employees.push(employee);
    },
    remove: function(state, index) {
      state.employees.splice(index, 1);
    }
  },
  actions: {
    generate: function(context) {
      context.commit('add', 'John Smith');
    }
  }
  </code></pre>
  
  <p>If actions are supposed to be asynchronous, then this is wrong.</p>
  
  <p>Example #2:</p>
  
  <pre><code>mutations: {
    add: function(state, employee) {
      state.employees.push(employee);
    },
    remove: function(state, index) {
      state.employees.splice(index, 1);
    },
    generate: function(state) {
      this.commit('add', 'John Smith');
    }
  }
  </code></pre>
  
  <p>Am I allowed to call a mutation from within another mutation? If not, then this is too wrong.</p>
  
  <p>Example #3:</p>
  
  <pre><code>mutations: {
    add: function(state, employee) {
      state.employees.push(employee);
    },
    remove: function(state, index) {
      state.employees.splice(index, 1);
    },
    generate: function(state) {
      state.employees.push('John Smith');
    }
  }
  </code></pre>
  
  <p>This on the other hand duplicates the logic - which seems wrong!</p>
  
  <p>Example #4:</p>
  
  <p><em>Store</em></p>
  
  <pre><code>mutations: {
    add: function(state, employee) {
      state.employees.push(employee);
    },
    remove: function(state, index) {
      state.employees.splice(index, 1);
    }
  }
  </code></pre>
  
  <p><em>Component</em></p>
  
  <pre><code>methods: {
    addJohnSmith: function() {
      this.$store.commit('add', 'John Smith')
    },
  }
  </code></pre>
  
  <p>This one seems okay, however I think this is the correct approach <em>only if all the input comes from the component</em>. What if I require this functionality to be controlled by the <em>store</em> instead, for example if I need to transform somehow this value? The component should be dumb enough to not care about this. A contrived example could be potentially adding a randomly generated title before the employee name, so the end result looks like this: Mr John Smith.</p>
  
  <p>Which one would be the correct way to handle this?</p>