Svelte vs Sveltekit

Question

在这里，我将与svelte教程一起学习：

https://svelte.dev/repl/a74f1ed8e3eb4aec82cb743e13443ee4?version=3.48.0

本质上，它包括App.Svelte文件和fetch.js导入文件。

​

import { writable } from 'svelte/store'

export default function (url) {
    const loading = writable(false)
    const error = writable(false)
    const data = writable({})
    
    async function get() {
        loading.set(true)
        error.set(false)
        try {
            const response = await fetch(url)
            data.set(await response.json())
        } catch(e) {
            error.set(e)
        }
        loading.set(false)
    }
    
    get()
    
    return [ data, loading, error, get]
}

<script>
    let url = "https://www.swapi.tech/api/people/1"
    
    import fetchStore from './fetch.js'
    const [data, loading, error, get] = fetchStore(url)
</script>

<button on:click={get}>
    Fetch again
</button>

{#if $loading}
    Loading: {$loading}
{:else if $error}
    Error: {$error}
{:else}
    <pre>{JSON.stringify($data, null, 2)}</pre>
{/if}

​

在斯维特，所有这些都能像预期的那样工作。

但是，如果将代码移动到Sveltekit应用程序中，我将在VS代码中得到以下错误。

​

​

​

​

​

​

我将fetch.js文件放在src目录的根目录中，并将App.Svelte重命名为getData.Svelte which is in the路由directory below thesrc``。

看起来，Svelte和Sveltekit之间的工作方式不同，这让教程变得很混乱。我是不是错过了一些最基本的东西？

Answer 1

这是一个TypeScript问题。我将不谈技术细节，只需告诉您一个快速修复:而不是返回一个数组，而是返回一个对象。

所以在fetchStore函数中，return { data, loading, error, get }。在svelte组件中，您可以像const { data, loading, error, get } = fetchStore(url)一样阅读。基本上将括号[]改为大括号{}，错误就会消失。