title: Vuex, changing state in an action
body: <p>I'm trying to code as "good practice" as possible while learning Vuex.</p>
  
  <p>From what I learning I tought that <strong>Actions</strong> are used to do for example external API calls, the result of that is passed to a <strong>Mutation</strong> via a commit(). </p>
  
  <blockquote>
    <p>Now I want to increment a counter for a certain user on Firebase. This is working when I code my action like this</p>
  </blockquote>
  
  <pre><code>    ADD_CREDIT(context, user) {
  
          user.credits++;
  
          firebase.database().ref('users').child(user.id)
              .update({credits: user.credits})
              .then(() =&gt; {});
  
      }
  </code></pre>
  
  <p>So in my action I already update the state before calling the API call. Is this good practice? I tried it the other way using the following code, but that just looks to complicated.. And it doesn't work for now.</p>
  
  <p><em>Action</em></p>
  
  <pre><code>ADD_CREDIT({commit, state}, user) {
  
          const newcredits = user.credits + 1;
  
          firebase.database().ref('users').child(user.id)
              .update({credits: newcredits})
              .then(() =&gt; {
                  commit('CREDIT_CHANGED', user.id, newcredits)
              });
  
      }
  </code></pre>
  
  <p><em>Mutation</em></p>
  
  <pre><code>CREDIT_CHANGED(state, userid, newcredits) {
          let user = state.users.find(user =&gt; {
              return user.id = userid
          });
  
          user.credits = newcredits;
      }
  </code></pre>