如何在Svelte中创建派生Store合并普通Store与Store数组的值

要实现将单个store的值与存储store数组的store的值拼接成目标数组，需要注意：b存储的是store对象而非直接值，且内部store的变化不会被顶层的derived自动监听，因此需要手动订阅这些内部store并管理更新逻辑。

完整实现代码如下：

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

const a = writable(1);
const b = writable([writable(2), writable(3)]);

const combined = derived([a, b], ([$a, $b], set) => {
    // 存储内部store的订阅函数，用于后续清理
    const subscriptions = [];
    // 存储当前所有内部store的值
    const innerValues = $b.map(() => null);

    // 更新最终结果的函数
    const updateCombined = () => {
        set([$a, ...innerValues]);
    };

    // 初始化并订阅每个内部store
    $b.forEach((store, index) => {
        const unsubscribe = store.subscribe(value => {
            innerValues[index] = value;
            updateCombined();
        });
        subscriptions.push(unsubscribe);
    });

    // 初始更新一次
    updateCombined();

    // 当a或b变化时，清理之前的订阅
    return () => {
        subscriptions.forEach(unsubscribe => unsubscribe());
    };
});

// 测试订阅
combined.subscribe(value => {
    console.log(value); // 输出 [1, 2, 3]，后续内部store或a变化时会自动更新
});

关键逻辑说明： #

• 使用derived的set方法手动控制combined的值，而非直接返回值，这样能处理内部store的异步更新。
• 维护innerValues数组存储每个内部store的当前值，当任意内部store变化时更新对应位置的值并重新计算combined。
• 每次a或b变化时，清理之前的内部store订阅，避免内存泄漏，然后重新订阅新的内部store数组。

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