如何在 Svelte 应用程序的共享功能中访问商店？答案

【问题标题】：How to access stores in a shared function in a Svelte app?如何在 Svelte 应用程序的共享功能中访问商店？
【发布时间】：2021-12-18 22:30:56
【问题描述】：

我有一个 Svelte 应用程序，它将使用浏览器历史 API 进行自己的路由。我想提供一个changeRoute(newRouteDetails) 函数并使其可用于 Svelte 应用程序中的所有组件。在更改为新 URL 之前，它需要访问各种 Svelte 商店的值来存储当前状态。

起初，我以为我可以在stores.js文件中定义函数，将其导出并在我的组件中使用。

我以为我可以使用 $storeName 访问商店的当前值，但这不起作用（我认为因为该函数位于 .js 文件而不是 .svelte 文件中，但它不是一个纤细的组件，所以我认为它不应该在 .svelte 文件中）。

我发现解决此问题的唯一方法是：使用get()，但建议不要在docs 中使用，或者要求调用函数的事物传入所有存储值。

但我觉得我可能错过了什么？

我已经制作了三个 REPL（仍然不知道它代表什么！），它们使用一个简单的 hello world 风格的应用程序来演示这个问题，我希望 updateName 函数结合传入的值和一个值从商店更新名称。

假设（2）在某种程度上“不是苗条的方式”，如果您只有一两个商店，那么（3）很好，但似乎也不完整（例如，如果函数想要等待tick() 和然后获取更新的存储值？），我们如何共享这样的函数？

【问题讨论】：

标签： svelte svelte-3

【解决方案1】：

在这里使用get 是正确的方法，文档说不推荐，因为通常不需要它。他们不建议在直接订阅会更好的商店里做这样的事情：

 let value = 0;
 function handleClick() {
   value = get(store);
 }

文档也提到了

有时，您可能需要检索您未订阅的商店的值。 get 允许你这样做。

这里的关键字是偶尔，我认为是你的情况。

【讨论】：

【解决方案2】：

我认为主要问题“使用 get() 可以吗？” 已经很好地回答了！
文档说

...您未订阅的商店的价值...

所以我只想补充一点：如果你想避免 get()，你的逻辑应该改变方式，它会由存储更改触发自动运行。所以不是“点击按钮 -> 运行函数，然后通过 get() 收集值”，而是“点击按钮 -> 更改存储值 -> 函数执行被被动触发”
在路由器逻辑的情况下，这可能不适用，使用 get() 可能很好，并且是可行的方法。
由于您给出的带有名称和问候语的示例有点不同，我想我会使用派生和自定义商店以不同的方法制作两个版本，只是为了说明其他方式 -> REPL

【讨论】：