Mutate sub properties without affecting other child of main property

[capodisseny]

I have a store with a module builder and a property elements.

elements is an object of objects so I try to do this mutations from a vue component:

this.$store.set('builder/elements@['+this.sal_id+'].title', value) )

sal_id is an key identifier inside the main property

So when I run this, the property updates properly but in makes update all builder.elements that are connected to other components.

The only way I had to achieve this is creating a mutations in vuex:

export function updateElement (state, payload){
    state.elements[payload.targetId][payload.key] = payload.value
}

I have tried this also:

this.$store.commit('builder/SET_ELEMENTS', new Payload('builder/SET_ELEMENTS', '@['+this.sal_id+'].title!', value) )

There is a way to avoid updating all 'elements' with pathify?

Thanks

[davestewart]

Hey,

Cool to see you digging into the more advanced features of Pathify!

Tip: use correct markdown formatting for code (check my edits)

Not sure I totally understand what you want me to look at.

Can you clarify:

So when I run this, the property updates properly but in makes update all builder.elements that are connected to other components.

Maybe you can show before an after JSON or something...

?

[capodisseny]

@davestewart Ok thanks! If I update using the path, what I understand pathify does, is to find the sub property and then (here is the problem) updates with the mutation builder/SET_ELEMENTS with update the whole property elements.

I want to only update the subproperty, if not, all my components depending on elements are going to update, and I only want to update the component which has this sub property

The data is saved properly, the problem is that is saving the whole property elements again instead of the sub property elements@sub.property

[davestewart]

OK. When you say "saved" what do you mean?

EDIT: Ah, I think you just mean the state was updated 👍

The sub-property access is actually a "hack" – there is one atomic mutation for the property, in this case elements – it's just that Pathify has the code inside the mutation helper it generated to update the sub-property, then set the mutation for the whole object.

This is just the way Vuex works - you have to mutate a single property (it has no concept of "sub-properties"), so you will always get a builder/SET_ELEMENTS commit in the dev tools :)

[capodisseny]

@davestewart aaaalll right, ok thanks, I thought it may be a way to do this with vuex. Probably the solution is take the object from sub-property level to property. So instead of builder/elements@item have elements/item. Thanks for the time anyway!

[davestewart]

Yeah, that would be the way to do it. I don't know if you can add top level state and mutations at runtime though!

Closing this ticket for now.

Cheers!