Vuex: One mutation to rule them all states

It is a good idea to create one Vuex mutation to change any states?

// Vuex
export default {

  state: {
    email: '',
    name: '',
    age: 0,
  },

  mutations: {
    update: (state, payload) => state[payload[0]] = payload[1]
  },

}

// Somewhere in .vue
this.$store.commit('update', ['email', 'someone@example.com'])
this.$store.commit('update', ['name', 'Someone'])
this.$store.commit('update', ['age', 21])
1 Like

Yeah I do this actually :’) but I use payload.value and payload.key instead :’)

And I use a deep setter function for deep paths :’)

You could always write it with spread syntax.

mutations: {
    update: (state, payload) => state = {...state, ...payload}
  },
this.$store.commit('update', { email: 'someone@example.com' })

That’s a good idea but still doesn’t work for deep paths :wink:

That’s true, but that wasn’t really part of the OP’s question.

I know I’m just saying, how often do you only modify top layer properties?

I try not to deeply nest, so pretty often. If an object starts to become too deep, it’s a good indicator it should be normalized. Makes working with them much simpler.

1 Like

It’s tempting to use Vuex like that. But I stopped doing this. It kind of takes away mutation history in Vue development tools, which I find really useful while debugging.