如何创建仅当新项目添加到另一个商店的数组时才执行代码的 Svelte 派生商店

Question

I'm working on a SvelteKit app in which all functionality is based on a list of URLs. Users can add URLs to this list, or remove them.

When a new URL is added, the app fetches the URL and then runs multiple async operations on the fetched data.

I can think of many ways to build this, but I would like to use Svelte derived stores , if possible.

• The list of URLs would be stored in a writable store
• When a URL is added, a derived store runs all required async operations on this new URL (and not on the other URLs) and stores the results.

What's the most Svelte way to build this?

Answer 1

The way I would do this is by using a custom store . createStores returns...

• .urls A derived store of type string[]
• .urlResults A readable store of type {url: string, value: unknown}[]
• .addUrl A function to add a URL
• .removeUrl A function to remove a URL.

createStore takes a callback function of type (url: string, set: (v: unknown) => void) => void that is run whenever a new URL is added.

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

function createStores(processUrl: (url: string, set: (v: unknown) => void) => void) {
    const urlResults = writable<{ url: string; value: unknown | null }[]>([]),
        urls = derived(urlResults, (all) => all.map((v) => v.url));

    const addUrl = (url: string) => {
        urlResults.update((v) => {
            v.push({ url, value: null });
            processUrl(url, (newValue) => {
                const index = get(urls).indexOf(url);
                if (index > -1) {
                    urlResults.update((current) => {
                        current[index].value = newValue;
                        return current;
                    });
                }
            });
            return v;
        });
    };

    const removeUrl = (url: string) => {
        urlResults.update((all) => all.filter((v) => v.url !== url));
    };

    return {
        urls,
        addUrl,
        removeUrl,
        urlResults: { subscribe: urls.subscribe }
    };
}

export default createStores((url, set) => {
    // Replace with your async actions
    setTimeout(() => set('Proccessed ' + url), 5000);
});