Pinia状态在使用展开运算符({…object})进行$patch时未更新。

huangapple go评论66阅读模式
英文:

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

问题

你好 Stack Overflow 社区,

我目前正在开发一个使用 Pinia store 的 Vue.js 项目。我在使用展开运算符 (...) 与 $patch 方法结合时遇到了一个问题,我的状态数据未按预期更新。

以下是我使用的代码片段:

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

在这种情况下,我的 Pinia store 的状态没有按预期更新。具体来说,rest 对象中的属性应该使用 $patch 方法应用到 store 的状态上,但我发现在此操作之后状态保持不变。

我曾以为以这种方式使用展开运算符会创建一个包含 res.data 中除了 password 和 createtime 以外所有属性的新对象,然后可以使用 $patch 方法将这些属性应用到我的 store 状态中。

我不确定为什么没有按预期工作,希望有人能够解释一下这个问题。非常感谢您的时间和帮助。

提前感谢您的帮助。

最好的问候,

"我尝试直接在 $patch 方法中设置每个单独的属性,如下所示:

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

这种方法按预期工作,状态被正确更新。因此,我得出结论,$patch 方法本身是正常工作的,问题必须与展开运算符有关。

我期望使用 $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."

答案1

得分: 0

是的,这是正确的。例如,如果res.data看起来像{password,createtime,a,b,c}rest将是res = {a,b,c}

这个问题与第一个信息(关于spread运算符)无关。你遇到的问题是pinia的$patch方法是深层响应式还是浅层响应式的问题。

这似乎是pinia的问题,正如this GitHub thread所示。那个线程中的解决方案似乎与你的解决方案相同,即明确使用一个新对象设置它。

所以回答你的问题:

这不是spread运算符本身的问题,而是Pinia如何处理嵌套对象以及它是不是深度响应式的问题。

你可以参考上面的GitHub线程,或者这个StackOverflow线程,以寻找比“显式设置”更好的解决方案,尽管对于你的情况来说,这似乎是最简单的解决方案。

英文:

> 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.

huangapple
  • 本文由 发表于 2023年7月18日 12:17:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76709501.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定