Pinia state not updating when using spread operator({...object}) in $patch

Hello Stack Overflow Community,

I'm currently working on a Vue.js project utilizing the Pinia store. I'm running into an issue where my state data is not updating as expected when using the spread operator (...) in combination with the $patch method.

Here's a snippet of the code I'm using:

const { password, createtime, ...rest } = res.data;
this.$patch(rest);

In this case, my Pinia store's state is not being updated as expected. Specifically, the properties in the rest object should be applied to the store's state using the $patch method, but I'm finding that the state remains unchanged after this operation.

I was under the impression that using the spread operator in this way would create a new object containing all properties of res.data except for password and createtime, and that these properties could then be applied to my store's state using the $patch method.

I'm unsure why this is not working as expected, and I was hoping someone might be able to shed some light on this issue. Any insights would be greatly appreciated.

Thank you in advance for your time and help.

Best regards,

"I tried directly setting each individual property in the $patch method as follows:

this.$patch({
  id: res.data.id,
  status: res.data.status,
  username: res.data.username,
  phone: res.data.phone,
  memberLevelId: res.data.memberLevelId,
});

This method worked as expected and the state was correctly updated. From this, I concluded that the $patch method itself is functioning correctly and that the issue must lie with the spread operator.

My expectation was that using the spread operator in $patch would allow me to update multiple properties at once, reducing redundancy in my code. However, in practice, the state remained unchanged when I attempted this approach.

What I would like to understand is why the spread operator did not produce the desired result, and what I can do to achieve this effect."

Solution

I was under the impression that using the spread operator in this way would create a new object containing all properties of res.data except for password and createtime,

Yes, that is correct. For example, if res.data looks like {password, createtime, a, b, c}, rest would be res = {a, b, c}.

and that these properties could then be applied to my store's state using the $patch method.

This issue is independent of the first information (about the spread operator). The issue you're encountering is whether pinia's $patch method is deeply reactive or shallowly.

This does seem to be an issue with pinia as illustrated by this GitHub thread. The solution from that thread also seems to be the same as yours, to explicitly set it with a new object.

So to answer your questions:

What I would like to understand is why the spread operator did not produce the desired result,

It is not the issue with the spread operator itself per se, but how Pinia works with nested objects and how it is not deeply reactive.

and what I can do to achieve this effect.

You could refer to the above GitHub thread, or this StackOverflow thread for better solutions than just "do it explicitly", though that does seem to be the simplest solution to your case.