Svelte中如何将readable store作为writable store的默认值？

首先明确：Svelte的writable store完全支持存储复杂对象，你的问题不是类型支持的问题，而是访问readable store内部值的方式错了。

你直接写taskStore[0]拿不到有效数据，因为taskStore是Svelte store实例，不是普通数组，不能用下标直接访问它的内部数据。要获取store的当前值，有两种常用解决方式：

方案1：初始化时直接读取默认值 #

如果taskStore的初始值不会动态变化，或者你只需要用它的初始值初始化currentTaskStore，可以用Svelte提供的get函数读取store的当前值：

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

export const taskStore = readable([ 
    {
        imageDir: '100159',
        frameCount: 50,
        labels: [
            { frame: 10, x: 125, y: 60 },
            { frame: 10, x: 125, y: 60 },
            { frame: 10, x: 125, y: 60 },
        ]
    },
    {
        imageDir: '100589', 
        frameCount: 50, 
        labels: []
    }
])

// 用get获取taskStore的当前值，再取第一个元素作为默认值
export const currentTaskStore = writable(get(taskStore)[0])

方案2：同步taskStore的动态变化 #

如果taskStore后续可能被更新（即便定义为readable，内部也可能有更新逻辑），需要currentTaskStore始终跟随taskStore的第一个元素变化，可以通过订阅taskStore实现：

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

export const taskStore = readable([ 
    // 你的任务数据...
])

export const currentTaskStore = writable(get(taskStore)[0])

// 订阅taskStore，当值变化时更新currentTaskStore
taskStore.subscribe(tasks => {
    if (tasks.length > 0) {
        currentTaskStore.set(tasks[0])
    }
})

这样既能保证currentTaskStore的初始值正确，后续也能同步taskStore的变化。

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