在 svelte 商店中保存 window 绑定

Question

互联网的好朋友们好，

我为用户的滚动位置创建了一个监听器： <svelte:window bind:scrollY={y} /> 我想将这个变量保存在商店中，以便在整个网站上访问它。但是为此我需要 setter。有什么好的方法可以做到这一点吗？

我试过了，但没用：

  $: () => scrollPos.set(y);
  $: console.log("LOG: scrollPos", $scrollPos);```

Answer 1

当响应式语句所依赖的值发生变化时，它们将被重新评估，因此您只需将 scrollPos.set(y) 设置为响应式，它就会按预期工作。

示例 (REPL)

<svelte:window bind:scrollY={y} />

<script>
  import { writable } from 'svelte/store';

  let y;
  const scrollPos = writable(0);

  $: scrollPos.set(y);
</script>

<div style="height:1000px;">
  <h1 style="margin-top:200px;">{$scrollPos}</h1>
</div>

Answer 2

代码如下：

<script>
import { y } from './store.js';
import LogScrollPosition from './LogScrollPosition.svelte';

let scrollY;
$: y.set(scrollY);
</script>

<button on:click={() => scrollY = 200}>
    Go down
</button>

<h1>Hello!</h1>

<LogScrollPosition />

<p>
Vestibulum arcu turpis, condimentum non lorem quis, volutpat laoreet turpis. Praesent euismod, libero eu pulvinar imperdiet, dolor ex molestie lacus, sed egestas arcu felis non libero. Aenean laoreet arcu porttitor dolor pulvinar eleifend. Pellentesque lacinia neque sit amet nulla blandit, at ullamcorper orci ultricies. Cras pulvinar nec est sit amet sollicitudin. Sed luctus massa nibh, eu luctus magna tincidunt vel. Morbi tempor velit elit, nec cursus risus pellentesque quis. Aliquam erat volutpat. Vivamus tristique lacus vel lorem lacinia, a accumsan turpis gravida. Maecenas dapibus gravida mauris, iaculis placerat urna rhoncus at. Vivamus vel malesuada nisi. Suspendisse pulvinar pellentesque lectus, non imperdiet nisi tempus sed. Maecenas vel magna eu diam faucibus semper ut nec neque.

Aliquam malesuada gravida libero, sit amet pellentesque felis viverra vel. Maecenas est tortor, eleifend ut est nec, maximus vehicula eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt fringilla urna id fermentum. Proin rhoncus iaculis ipsum. In a sapien sapien. Sed eget justo ac turpis sodales imperdiet. In condimentum mauris ut ex sagittis, id malesuada ligula dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Vivamus volutpat id velit et vehicula. Vivamus lectus orci, aliquam a maximus et, rhoncus in nibh. Etiam interdum sagittis justo et scelerisque. Quisque dapibus pulvinar pulvinar. Curabitur pulvinar, odio id eleifend consequat, sapien nulla congue metus, ut porttitor massa ipsum eget mauris. Duis a facilisis velit, non semper massa. Vestibulum semper velit nisi, sit amet blandit eros consectetur sit amet. Morbi accumsan magna a ex tempus imperdiet. Duis vitae convallis ipsum, imperdiet efficitur magna. Praesent ultrices turpis nec enim molestie, non aliquet tellus luctus. Sed porttitor nibh sit amet metus malesuada imperdiet et vitae ligula. Donec sit amet ullamcorper nisl. Nulla rhoncus ligula non tellus finibus efficitur. Nullam accumsan mattis risus at cursus. Duis ligula ligula, ullamcorper ac risus nec, hendrerit vulputate massa.

Phasellus pellentesque mauris ligula, id dapibus nisi lobortis a. In eget quam tincidunt, mattis ante eu, dignissim nisl. Proin sollicitudin dolor porttitor, tincidunt ipsum at, consequat leo. Morbi consequat imperdiet mauris, sed maximus tellus venenatis ut. Vestibulum tempus nisi ac semper volutpat. Vivamus rhoncus augue eu erat aliquet sodales. Ut consequat sapien enim, in pulvinar mauris dapibus varius. In mi mi, aliquam vel ante eu, lobortis aliquet lorem. Donec vulputate ac lorem ac laoreet.
</p>

<svelte:window bind:scrollY={scrollY} />

基本上你很接近，但不要让函数与 $: () => ... 反应。就做 $: scrollPos.set(y).

这是一个例子REPL。

Answer 3

您应该能够直接绑定到存储值：

<script>
    import { writable } from 'svelte/store';

    const y = writable(0);
</script>

<svelte:window bind:scrollY={$y}/>

不幸的是，您发现了一个错误 — 无论出于何种原因，该错误目前都不起作用。我在这里打开了一个问题：https://github.com/sveltejs/svelte/issues/3832

在 svelte 商店中保存 window 绑定

Save window binding in svelte store

javascript

svelte

svelte-component

svelte-3

svelte-store