如何将数据发送到另一个页面？答案

【问题标题】：How to send data to another page?如何将数据发送到另一个页面？
【发布时间】：2021-04-15 04:10:14
【问题描述】：

我有一个函数getData()，当我的输入文本不为空时，它会在submit 上启动，

Index.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) 以在简单的仪表板上显示此数据？

感谢您的帮助

【问题讨论】：

你说的“发送数据到另一个页面”是什么意思？
我的意思是，我从 Index.svelte 上的 api 数据中获得，但我在 Home.svelte 上显示此数据

标签： javascript typescript svelte sapper

【解决方案1】：

把它放在store中。

_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}

您也可以考虑将您的 fetch 逻辑也转移到存储中，方法是将 searchQuery 设为可写存储，并将 searchResult 设为派生存储，每次 searchQuery 更改时都会调用 API。

【讨论】：