Is it possible to update multiple properties at once?

[DarkLite1]

Consider the following object in the state:

    profileButton: {
      label: '',
      icon: "account_circle",
      disabled: false,
      loading: false,
    },

My manually written mutation looks like this:

export const SET_BUTTON = (state, payload) => {
  state[payload.name] = { ...state[payload.name], ...payload.updates }
}

This allows me to do one call and have the required properties updated and the others untouched. Would something like this be possible with the set method?

Currently I only find examples in the documentation to mutate only one subproperty. It would be great to be able to update multiple properties with one call. The workaround of course can be to copy the object first and then send it all over as one big payload. But that seems to be defeating a bit the purpose of using vuex-pathify

[davestewart]

Hello,

Sure! Your mutation can be anything you like.

All Pathify really does is wire up the calls.

Did you try it?

[DarkLite1]

Sure, your suggestion is to use the Pathify call to call my own written mutation. That works fine of course. But I was wondering if there was a general set syntax to use that will only set the required fields and not remove the other unchanged fields.

Something like this would be cool:

store.set('auth/', profileButton: {
      label: 'Bob',
      icon: "bob_pic",
    }
)

Which would then update the original object to:

   profileButton: {
      label: 'Bob',
      icon: "bob_pic",
      disabled: false,
      loading: false,
    },

[davestewart]

Actually call() is for actions.

Sorry - there are a lot of docs, and I probably would have done them differently if I had done them now.

To achieve what you want, you just need to write your mutation handler to do what you want. You will still use Pathify in exactly the same way (because as I said, it's just wiring):

// auth store
mutations: {
  profileButton (state, values) {
    Object.assign(state.button, values)
  } 
}

// some component
store.set('auth/profileButton' {
  // assign only two values
  label: 'Bob',
  icon: "bob_pic",
})

// which is syntactically equivalent to
store.commit('auth/profileButton' {
  label: 'Bob',
  icon: "bob_pic",
})

Where set() gets funky is when you use make.mutations() and have sub-property syntax, because then the mutations figure out the sub-property and do the Object.assign() for you, at the desired depth.

As for the "generalised" format, nope.

You could of course write your own mutation helper function. Mutations are nothing more than pure functions, so any factory function (like make.mutations()) can return a function which becomes the mutation:

function makeMultiplierMutation (key, multiplier = 1) {
  return function (state, value) {
    state[key] = value * multiplier
  }
}

mutations: {
  single: makeMultiplierMutation ('single', ),
  doubled: makeMultiplierMutation ('doubled', 2),
}

[DarkLite1]

Thank you Dave for the clarification. It's a bit more clear now. I was looking for a feature that's simply not there so as you said it's best to address my own written mutation or create a helper myself.

For now, as a newbie, I'll stick to the default and address my own mutation. Thanks anyhow for the feedback and the still amazing library. Love it!

[davestewart]

Good stuff man! Glad to help, and enjoy :)