$patch function replace value in remote object

[mathias22osterhagen22]

Reproduction

https://github.com/mathias22osterhagen22/vuejs-pinia-patch-issue.git

Steps to reproduce the bug

1. Create an Enum with object as keys (or any object)
   
2. Create a property in the state & assign a value from the enum object (or a prop of an object)
   
3. Patch the property of the state with an object having the same properties
   

Expected behavior

1. State updating ✅
2. Object values updating ❌

Actual behavior

1. State updating ✅
2. Object values updating ✅ <--- this should not happend

Additional information

Object before patch:

Patching "TEST" updating the state + the object values passed as ref:

This seems to happened because the $patch method is updating from bottom to top recursively:

pinia/packages/pinia/src/store.ts

Line 83 in 78ec9a1

target[key] = mergeReactiveObjects(targetValue, subPatch)

I met this issue because of the Local storage "loading" (with the plugin https://github.com/prazdevs/pinia-plugin-persistedstate)

I'm storing an Enum object in the state, stored in the local storage. On page reload the $patch function is called and come to replace the value Enum object value for the entire website.

[LinusBorg]

Assigning an object to a different variable/object property does not make a copy. it just makes a new reference to the same object, so changing one changes the "other" as well.

That's just how JS works.

[mathias22osterhagen22]

@LinusBorg You didn't understand, I known how "JS works", the problem is that $patch assign values recursively.

In this case:

let a = {age: 12, name: 'test'};
let b = {age: 23, name: 'second'};
let d = a; //the initial state

Instead of doing :

d = b;

// -- RESULT --
//a = {age: 12, name: 'test'}
//b = {age: 23, name: 'second'}
//d = {age: 23, name: 'second'} (pointing on b)

$patch is doing this:

d.age = b.age;
d.name = b.name;
d = b;

// -- RESULT --
//a = {age: 23, name: 'second'} <--- 'a' object was modified because of patch
//b = {age: 23, name: 'second'}
//d = {age: 23, name: 'second'} (pointing on b)

As you cant see in the code:
https://github.com/prazdevs/pinia-plugin-persistedstate

[LinusBorg]

You are right in that I misunderstood the point of your issue. However, as you correctly show in the source, that is the intended behavior of $patch and thus not a bug.

But likely something that needs a clarification in the docs @posva

[posva]

Added to the docs roadmap!
BTW, related issue:

• $patch method mutates the state property while trying to update another one #528

[mathias22osterhagen22]

Ok so for now I freeze my object (as it's an enum), but exepect just the reference to update, I don't know if it's to cover some specific points or what? Btw, seems that $patch is adding properties as well in the remote object.

let a = {age: 12, name: 'test'};
let b = {age: 23, name: 'second', newprop: 'new'};
let d = a; //the initial state

$patch

d.age = b.age;
d.name = b.name;
d.newprop = b.newprop;
d = b;

// -- RESULT --
//a = {age: 23, name: 'second', newprop: 'new'} <--- 'a' object was modified because of patch + new prop
//b = {age: 23, name: 'second', newprop: 'new'}
//d = {age: 23, name: 'second', newprop: 'new'} (pointing on b)

Is there any other function that do not update the referenced object subprop but just the root reference ?
Basically:

d = b;

// -- RESULT --
//a = {age: 12, name: 'test'}} <--- a not changing
//b = {age: 23, name: 'second', newprop: 'new'}
//d = {age: 23, name: 'second', newprop: 'new'} (pointing on b)

EDIT: @posva Could you let me know what is the cleanest way to deal with it ?

• Using JSON.parse(JSON.stringify(object)) to avoid the real object to be updated?
• Using Freeze on the properties of the object and the object itself to avoid it to be updated?

Thank you very much.

[LinusBorg]

$patch(state => {
state.enumValue = { /* new object*/ }
})