（六）SvelteKit教程：刷新数据，preload data，环境变量和部署

（六）SvelteKit教程：刷新数据，preload data，环境变量和部署

1.刷新数据

文件目录如下：

├── stocks
│   ├── +page.js
│   └── +page.svelte

+page.js 内容如下：

export const load = async (loadEvent) => {
	const { fetch } = loadEvent;
	// depends('stocks:actively-trading');
	const response = await fetch('http://localhost:4000/stocks');
	const stocks = await response.json();
	return { stocks };
};

+page.svelte 内容如下：

<script>
	import { invalidateAll, invalidate } from '$app/navigation';
	export let data;

	function refresh() {
		// invalidateAll();
		// invalidate('stocks:actively-trading');
        invalidate('http://localhost:4000/stocks');
	}
</script>

<h1>Actively trading stocks</h1>

{#each data.stocks as stock}
	<h2>{stock.symbol} - ${stock.price}</h2>
{/each}

<button on:click={refresh}>Refresh</button>

重点是里面的 refresh 函数。

2.preload data

如下 routes/+page.svelte 内容：

<script>
    
    import { goto, preloadData } from "$app/navigation";
    const handleClick = () => {
        console.log("handleClick about page");
        goto("/about");
    };
</script>

<div>
    This is a Home page.

    <a href="/users" data-sveltekit-preload-data="hover"> users page</a>
    <a href="/stocks"> stocks page</a>

</div>

<button 
    on:focus={async () => {
        await preloadData("/about");
    }}
    on:mouseover={async () => {
        await preloadData("/about");
    }}

on:click={handleClick}>Go to About page</button>

其中 <a href="/users" data-sveltekit-preload-data="hover"> users page</a>这行代码是通过参数来进行 preload data，如果你想要通过写代码，那么可以参考如下：

on:focus={async () => {
        await preloadData("/about");
    }}
    on:mouseover={async () => {
        await preloadData("/about");
    }}

3.环境变量

在根目录下设置 .env 文件，里面写入：

DB_USER=root
DB_PASSWORD=root
DB_HOST=localhost

之后，我们可以通过在 +page.server.js 中通过：

import { DB_USER } from '$env/static/private';  

来进行使用。

4.部署

通过 https://vercel.com/ 非常容易