[Vuejs]-Vuejs – Vuex behavior when committing a property

by

4👍

You’re passing an object without a password property defined, so it’s going to update the state object accordingly.

I’d just loop through the properties of the payload to update each related state object property. And as @82Tuskers pointed out, you’ll need to use Vue.set if the property in the payload object doesn’t yet exist on the state object (otherwise the property won’t be reactive):

authUser: (state, payload) => {
  for (prop in payload) {
    if (state.hasOwnProperty(prop)) {
      state[prop] = payload[prop];
    } else {
      Vue.set(state, prop, payload[prop]);
    }
  }
}

This way, only the properties being passed in the payload object will be updated on the state object.

👤thanksd

1👍

It is not strange, it is expected behaviour. Just rewrite your mutation this (recommended) way:

authUser: (state, payload) => {
  state = Object.assign({}, state, payload)
}
👤Vladislav Ladicky

0👍

While the other answers seem to fix your issue, it might be worthwhile to put the user-related items into a user object inside the state. It is also best practice to establish your state properties up front so you can avoid having to use Vue.set(...):

state: {
user: {
email: '',
password: ''
}
}

…then you could easily avoid looping by using the spread operator: state.user = { ...state.user, ...payload } – this essentially says “take everything currently inside state.user and merge it with payload, overwriting what is in state.user with state.payload“

👤hutch

Leave a comment