Svelte中如何基于另一个Store更新Writable Store（轮播场景）

错误原因 #

你遇到的Property 'length' does not exist on type 'Readable<{}[]>'错误，核心原因是**slides是Readable类型的Store对象，不是直接的数组**——你不能直接通过slides.length访问数组长度，必须先获取Store内部的实际数组值。另外你的currentSlide推导Store也有小错误：$slides本身就是你存储的数组，不需要再访问.slides属性。

修正方案 #

1. 导入get函数 #

首先确保从svelte/store导入get工具函数，它可以同步获取Store的当前值：

import { readable, writable, derived, get } from 'svelte/store';

2. 修正nextSlide和previousSlide函数 #

在更新索引时，先用get(slides)获取实际的幻灯片数组，再计算长度：

function nextSlide() {
  slideIndex.update((currentIndex) => {
    const slidesArr = get(slides);
    const isLast = currentIndex === slidesArr.length - 1;
    return isLast ? 0 : currentIndex + 1;
  });
}

function previousSlide() {
  slideIndex.update((currentIndex) => {
    const slidesArr = get(slides);
    const isFirst = currentIndex === 0;
    return isFirst ? slidesArr.length - 1 : currentIndex - 1;
  });
}

3. 修正currentSlide推导Store #

derived函数的回调参数会自动解包Store的值，$slides就是你初始化时传入的数组，直接用它访问对应索引的幻灯片即可：

const currentSlide = derived(
  [slides, slideIndex],
  ([$slides, $slideIndex]) => {
    return $slides[$slideIndex];
  }
);

额外说明 #

如果你的slides Store后续会异步更新（比如从接口获取数据），get(slides)仍然能正确获取最新的数组值，因为它会读取Store当前的状态快照。这种同步获取的方式非常适合按钮点击这类同步触发的场景。

内容的提问来源于stack exchange，提问作者marielle