I'm trying to code as "good practice" as possible while learning Vuex.

From what I learning I tought that Actions are used to do for example external API calls, the result of that is passed to a Mutation via a commit().

Now I want to increment a counter for a certain user on Firebase. This is working when I code my action like this

ADD_CREDIT(context, user) { user.credits++; firebase.database().ref('users').child(user.id) .update({credits: user.credits}) .then(() => {}); }

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.

Action

ADD_CREDIT({commit, state}, user) { const newcredits = user.credits + 1; firebase.database().ref('users').child(user.id) .update({credits: newcredits}) .then(() => { commit('CREDIT_CHANGED', user.id, newcredits) }); }

Mutation