（六）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/ 非常容易