How to manage too many Vuex mutations?

I’m using Vuex for a project that is growing. I use mutations to change the data in the store state.

Now there are many mutations so I need to somehow organize it to make it managable. What is the recommended way to manage too many Vuex mutations?

Depending on the store its self and what you are mutating. If your setting multiple states for different components / parts of the site you could break it down into individual modules.
Keep all user stuff in a store/userStore.js, products on a store/productsStore.js as examples.

https://vuex.vuejs.org/guide/modules.html

Or reusable Vuex mutations.

I ended up using a combo of both but in the end its up to you what you feel best works for your app.

Hope that help.

Dave

2 Likes

Now I have my own take on this problem.

Mutations

  • Put all mutations into a separate file into, like the docs suggests.
  • Add a call to a function outside mutations.
  • The function call needs to pass on the state.
  • My own rule is that a mutation can only contain one row inside the function, to keep it clean.
const mutations = {
  messageValue: (state, value) {
    message.setValue(state, value);
  },
  messageKey: (state) {
    message.setKey(state);
  }
  presentation: (state, view) {
    presentation.view(state, view);
  }
}

Custom code

Here is my own custom message constant, that contains everything that has to do with message.

const message = {
  setValue(state, value) {
    // A lot
    // of  code
    state.message = value;
  },
  setKey(state) {
    // A lot
    // of  code
    state.message = key;
  }
}

The same thing goes for presentation.

const presentation = {
  view(state, view) {
    // A lot
    // of  code
    state.presentation = view;
  }
}