问题标签 [svelte-store]

我想在执行突变后找到一种更好的方法来更新本地组件状态。我正在使用 svelte-apollo，但我的问题是关于基本原则的。我有watchQuery，它获取项目列表并在组件中返回ObservableQuery 。

在组件中我称之为：

我有addItem突变。

我只是想在addItem突变后更新本地状态并将新项目添加到可观察的查询结果中，而不使用 refetchQueries（因为我不想在刚添加一个项目时通过网络获取所有列表）。我在缓存中看到了这个项目，但我的视图没有更新。

PS如果你有类似的问题和一些解决方法，很高兴看到你的一些案例。

如何将 Svelte 存储与树状嵌套对象一起使用？从这个答案：

注意：绑定仅在它是相同变量时才有效。也就是说，您不能将绑定变量放在中间变量中，并让 Svelte 继续跟踪此绑定。

这一点，以及我自己的测试，似乎暗示着无法从 Svelte 组件外部的脚本被动地更新嵌套存储（更新存储并更新状态）。据我所知，唯一的方法是store.update()在对商店进行更改后手动调用脚本。它是否正确？

我正在寻找重构我的代码：我的主要组件的代码变得过于笨拙，我想引入更多的组件，并且可能将.js文件中的状态更新函数保留在组件之外以实现可重用性。

关于性能的一些问题：

1. 手动更新会比 Svelte 自动更新的性能低吗？
2. 我的应用程序需要处理一个相当大的嵌套商店，有数百个分支。在上面链接的答案中，建议创建一个嵌套商店，分支包裹在自己的商店中。与仅使用单个商店相比，拥有数百个（嵌套）商店会显着增加应用程序的内存占用吗？

我将直入主题，如果存储中的变量为 === 'true'，我将尝试设置 setTimeout，否则我将尝试清除它。即使我正在清除超时和 else if 中的代码与 console.logs() 一起执行，但不知何故 setTimeout 并没有真正清除。知道我做错了什么吗？

我想知道在 if 语句中使用两个商店检查相等性是否是个好主意，因为它似乎正在工作。通常我会简单地将它与对象 ID 进行比较，但在很多情况下，直接比较两个商店会很好。我有点担心，因为我不知道为什么这是有效的，如果它总体上是一个好主意，或者这样做可能存在我还没有遇到的问题：

这是repl：https ://svelte.dev/repl/93d43b5236954cb7951a09bfd58243f4?version=3.38.2

In SvelteKit, I get "Subscribed" and "Unsubscribed" logged to the console each time I navigate between the /first and /second routes. I want to have the readable's start function run only once for each user who visits the website - allowing me to store fetched data that doesn't change often.

As I navigate between pages/routes in SvelteKit, unsubscribe is called so the next page/route invokes the start function as the "first" subscriber.

How can readable stores be shared across multiple pages/routes without re-running the start function? I've heard suggestions about using the template but have never seen an example.

Would the template get the store value and pass it as props to components or simply prevent the store from having a "last subscriber" (effectively keep the door open)?

我可以订阅这样的商店：

但是当我们想取消订阅时，我们会将之前的订阅代码放入一个新变量中（成为一个函数表达式），并且只有在组件被销毁时才运行它（onDestroy）

问题是，如何将前一个函数放入一个名为 unsubscribe 的新变量中。可以对商店执行取消订阅功能。我的意思是我们甚至根本不改变取消订阅实现的订阅代码，我们所做的只是把它放在一个新的变量中，让它变成一个函数表达式并且只通过 调用它onDestroy，那么它怎么能神奇地取消订阅呢？它实际上是如何工作的？

我有一个像这样构建的组件

注意我有一个过渡和一个动画。过渡有效，但是如果翻转动画在那里，则输出过渡不起作用：/有没有办法正确地做到这一点，以便过渡和动画都有效？提前致谢

我构建了一个 Svelte 应用程序，其中包含一个 stores.js 文件，其中包含一个名为 sSchool 的可写存储值。我以这种方式将应用程序注入到我的 html 页面中。

我希望能够从此网页内的 JavaScript 片段获取和设置商店价值 sSchool。我怎样才能做到这一点？谢谢。

我创建了一个包含用户列表的商店，我想使用不同的参数进行订购。

store.js

为此，我使用了 Lodash 的orderBy。

案例 A.如果我不使用每个块的键控，则按orderBy预期工作。

App.svelte

但是，如果我删除或对我的商店进行一些特定更改，更新将无法正常工作。对 Svelte 文档中发生的事情的更好解释。

案例 B.如果我对每个块使用键控，则更新按预期工作，但不是orderBy。

App.svelte

这是 Svelte REPL 的真实示例。

访问上面的链接并单击按钮以在升序或降序之间切换。

可能我错过了关于每个块的键控，但想弄清楚 Svelte 专家如何解决这个问题。

我有一个运行良好的单页应用程序。现在的计划是为移动设备用户添加另一个界面（例如，有条件地为来自移动设备的访问者呈现的界面），这样当他们与界面交互时，他们将影响已经在 PC 浏览器中打开的应用程序。在我的例子中，这可能对应于，移动设备用户在他/她的界面中选择了一个视频源，并改变了在 PC 浏览器上播放的视频。我想如果不同的访问者可以writable为视频源共享一个商店，这将是可以实现的。我知道 sveltekit，但我发现构建应用程序不太明显，尤其是当我server.ts提供视频内容时。有任何想法吗？

更新：评论是正确的，我已经用 websocket 实现了这个。谢谢！