问题标签 [svelte-store]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
svelte - svelte:在组件之间传递响应式数据
我有一个带有 onMount 的组件(userprofile)来加载用户配置文件图片,我有另一个组件(updatePic)来更新用户配置文件图片,我希望用户图片在 userprofile 组件上更新时在 updatePic 组件上立即更改。现在我尝试使用可写存储,但它不起作用,当我为反应性添加 $ 时,我得到错误“订阅不是函数”。
用户配置文件组件
更新图片组件
uPic.js
javascript - 如何更新这个 Svelte 商店而不每次都重新创建它?
这里是 REPL:https ://svelte.dev/repl/56770fec88af4b76bdc8ea962178854e?version=3.42.1
这里的代码:
App.svelte:
商店.js:
如您所见,如果您单击“更改名称”,商店将重新创建。
这是我需要避免的。
但是怎么做?
svelte - Svelte 将参数添加到派生状态并保持其反应性
在这个例子中,$derivedValue
是反应式的;如果myArray
在索引 3 处更改,它也会自动更改。
App.svelte
store.js
我想创建一个反应式吸气剂,如下所示:
当然,在这种情况下derivedValue
是一个函数,不再可订阅。有没有办法用参数创建这样一个可订阅的反应派生值?
svelte - 在高阶苗条商店中取消订阅
我有以下高阶 Svelte 商店:
它在派生存储周围包装了一个补间存储,这为您提供了一个既从另一个存储派生的存储又在值之间进行补间的存储。
我的问题是如何修改它,以便在取消订阅derivedStore
高阶derivedTweened
商店时从内部取消订阅。还是我误解了商店订阅的工作方式,实际上不需要手动取消订阅内部商店?
svelte - 在具有许多功能和许多道具的大型 Svelte 脚本块中跟踪函数内部的道具?
例如,当您有一个包含 20 多个函数的大型脚本块并且其中许多函数依赖于某些隐式状态时,例如,假设 x 和 y 是传入的道具,它们将在其他地方更新并且必须被跟踪,那么方法是什么你让这一切井井有条吗?
一种方法是, $: doSomething = function (a, b) {...}
但我发现这会让人感到困惑,并要求用户跟踪这些隐式依赖项的来源——使代码难以理解。你也很容易遇到循环依赖。
另一种方法是使用商店。将所有依赖项放在存储中并在函数中使用它。那么你有$store.x
. 但是,这需要在单个组件中使用 store,这可能会让人觉得有点矫枉过正。
我想您也可以尝试使所有这些函数成为纯函数并在调用站点传递所有内容......所以<div onBlur={() => doSomething(a, b, x, y}}
。但是我有一些功能需要处理很多事情,并且感觉很繁重(甚至是非 Svelte-y)将所有这些依赖项传递到任何地方,并且可能需要使用很多 $: x = 以确保所有内容都更新。
我能想到的唯一另一件事是将所有这些东西提取到脚本之外的一个模块中,该模块对依赖项有自己的闭包。
svelte - 骑自行车穿过 Svelte 的商店时的过渡?
我有一个元素显示来自商店的数组中的文本。它仅显示“当前索引”中的文本。我可以单击一个按钮来更改“当前索引”,并且显示的文本将相应更改。是否可以使用 Svelte 的过渡来淡出旧文本并淡入新文本?
svelte - 无需覆盖的 Svelte 存储和临时变量
我有存储对象数组。商店是从具有“完成”和“取消”按钮的弹出组件访问的。我的目标是仅在用户单击“完成”按钮时更新商店。如果弹出窗口关闭或单击“取消”按钮,我不想更新商店。我认为我可以使用局部变量来分配 Store 的值,但即使我更新了局部变量,它也会更新 Store。商店应该这样运作吗?
这是弹出组件
这里是商店之一。它们都是相同的,只是名称不同。
svelte - Svelte:如何处理组件中自定义可写存储的异步初始化承诺?
我有几个 Svelte 组件和一个自定义可写存储。商店有一个init
函数,async
它用一些 REST API 的数据库表的数据填充商店的值。我的组件都必须使用自动订阅来订阅这个商店。在订阅时,init
必须调用。全局思想是在数据库上实现 CRUD 操作,对商店进行 CRUD 操作(用于显示商店的值,即数据库的表,具有反应性)。
按init
原样async
返回一个承诺,我需要.then .catch
在我的组件中使用它。但是由于我使用自动订阅(通过在商店名称前加上$
),我该怎么做呢?
例如:(App.svelte
组件):
Restaurant.js
(商店):
svelte - 精简两个组件以访问同一个对象
在我的应用程序中,我有一条路线map.svelte
这有两个子组件:Map.svelte
和LayerSelector.svelte
Map.svelte
创建一个 OpenLayersmap
实例。LayerSelector.svelte
需要访问这个实例。
我正在声明map
实例map.svelte
并将其绑定到两个组件,但似乎无法访问它LayerSelector.svelte
map.svelte:
Map.svelte:
initMap.js
层选择器.svelte:
我可能哪里出错了?我是否需要将 OpenLayersmap
实例放在可写存储中?
svelte - 为什么将工厂用于自定义存储而不是仅导出对象
我正在阅读 Svelte 教程,并且在自定义商店页面 ( https://svelte.dev/tutorial/custom-stores ) 上。示例代码是使用工厂函数编写的,该函数createCount
被立即调用以创建导出的存储对象:
这样做的原因是什么,而不是像这样直接导出 store 对象: