[Vuejs]-Multiple modifications of state inside one Vuex mutation

by

0👍

If your maxId should be bumped whenever a notification is added, you MUST keep the two assignments on the same mutation so there’s no chance of someone committing ADD_NOTIFICATION without bumping the id.

The only reason to keep BUMP_MAX_ID as an exposed mutation type would be if you need to bump your id without doing anything else to the store. If you don’t need to do that, exposing it can create some unnecessary bugs.

So, the final code would look like as you proposed in your question.

const mutations = {
  [ADD_NOTIFICATION] (state, notification) {
    state.notifications.push(notification);
    state.maxId += 1
  },
  // [BUMP_MAX_ID] removed
}

Also, if you have to bump your maxId every time any other mutations are commited, you need to write that on every mutation too, like this

const mutations = {
  [MUTATION_1] (state, payload) {
    doSomething(state);
    state.maxId += 1;
  },
  [MUTATION_2] (state, payload) {
    doSomethingElse(state);
    state.maxId += 1;
  },
  // and so on...
};

If you REALLY don’t want to write state.maxId += 1 every time, you can create a helper function

function applyIdBumper(state, mutate) {
  mutate(state);
  state.maxId += 1;
}

Leave a comment