javascript - 如何将数据发送到另一个页面？

Question

我有一个功能在我的输入文本不为空时getData()启动，submit

索引.svelte

<script>
    let inputValue = '';

    let responseData;
    async function getData(){
        let url = new URL('url');
        url.search = new URLSearchParams({
            url: inputValue
        })

        const response = await fetch(url);
        const repositoryData = await response.json();

        responseData = repositoryData;
        goto()
    };

  </script>

如何将此函数返回的数据发送到另一个页面（Home.svelte）以在简单的仪表板上显示此数据？

谢谢你的帮助

标签： javascripttypescriptsveltesapper

Answer 1

把它放在商店里。

_stores.js

import { writable } from 'svelte/store'

// have a store
export const searchResult = writable(null)

Index.svelte

<script>
    import { searchResult } from './_stores.js';

    let inputValue = '';

    let responseData;
    async function getData(){
        let url = new URL('url');
        url.search = new URLSearchParams({
            url: inputValue
        })

        const response = await fetch(url);
        const repositoryData = await response.json();

        // equivalent to: searchResult.set(repositoryData)
        $searchResult = repositoryData; // <================== set the store

        goto()
    };
</script>

Home.svelte

<script>
  import { searchResult } from './_stores.js'
</script>

<!-- read the store -->
{#if $searchResult}
  {#each $seartResult as $result}
    ...
  {/each}
{:else}
  <p>Enter your search</p>
{/if}

您也可以考虑将获取逻辑也转移到存储中，方法是创建searchQuery一个可写存储和searchResult一个派生存储，每次searchQuery更改时都会调用 API。