Home >Web Front-end >CSS Tutorial >Getting Started With SvelteKit
Getting Started With SvelteKit
- Lisa KudrowOriginal
- 2025-03-09 10:42:14442browse
SvelteKit is a representative of the new generation of application frameworks. It will of course build applications for you, including file-based routing, deployment, and server-side rendering that Next has always provided. But SvelteKit also supports nested layouts, server-side mutations of synchronized page data, and some other features we'll introduce soon. This article aims to give a high-level overview of SvelteKit, hoping to inspire the interest of anyone who has never used SvelteKit. It will be an easy journey. If you like what you see, the full documentation is here. In some ways, writing this article is challenging. SvelteKit is an application framework. It exists to help you build...apps. This makes the demonstration difficult. Building an entire application in a blog post is not feasible. So we will use our imagination a little bit. We will build the skeleton of the application, using some empty UI placeholders and hard-coded static data. The goal is not to build an actual application, but to show you the running mechanism of SvelteKit so that you can build your own application.
npm create svelte@latest your-app-name
in the terminal and answer the question tips. Be sure to select "Skeleton Project", but for TypeScript, ESLint, etc., you can make any choice if you want.<https:>
<p>After the project is created, run <code>npm i<https:> and <code>npm run dev<https:>, and the development server should start running. Launch <code>localhost:5173<https:> in your browser and you will get the placeholder page for the skeleton application. <https:>
<h3>Basic Routing<https:>
<p>Please note the <code>routes<https:> folder under <code>src<https:>. It contains the code for all our routes. There is already a <code> page.svelte<https:> file that contains the contents of the root <code>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712<https:> route. No matter where you are in the file hierarchy, the actual page of that path is always named <code> page.svelte<https:>. With this in mind, let's <code>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list<https:>, <code>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712details<https:> , <code>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712user-settings<https:> and <code>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712paid-status<https:> Create a page and add some text placeholders for each page. <https:>
<p>Your file layout should look like this: <https:>
<p>You should be able to navigate by changing the URL path in the browser's address bar. <https:>
<h3>Layout<https:>
<p>We want to add navigation links to our app, but we certainly don't want their tags to be copied to each page we create. So let's create a <code>layout.svelte<https:> file in the root of the <code>routes<https:> folder, which SvelteKit will treat as a global template for all pages.Let's add some content to it: <https:>
<pre class="brush:php;toolbar:false"><nav>
<ul>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712">Home<https:>
<https:>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list">To-Do list<https:>
<https:>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712paid-status">Account status<https:>
<https:>
<li>
<a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712adminhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712user-settings">User settings<https:>
<https:>
<https:>
<https:>
<slot><https:>
<style>
nav {
background-color: beige;
}
nav ul {
display: flex;
}
li {
list-style: none;
margin: 15px;
}
a {
text-decoration: none;
color: black;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>Some basic navigation and some basic styles. What is particularly important is the <code><slot><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> tag. This <em> is not the slot you use with web components and Shadow DOM, but a feature of Svelte that indicates where our content is placed. When the page is rendered, the page content will slide into the location where the slot is located. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>Now we have some navigation! We won't win any design competitions, but we didn't try to do that either. <p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>Nested layout<h3>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>What if we want all management pages to inherit the normal layout we just built and also share some common points of all management pages (but only management pages)? No problem, we add another <p> layout.svelte<code> to the root <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> admin<code> directory and it will be inherited by everything below it.Let's do this and add this: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"><div>This is an admin page<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712div>
<slot><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>
<style>
div {
padding: 15px;
margin: 10px 0;
background-color: red;
color: white;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>We add a red banner indicating that this is an admin page, and then, as before, a <code><slot><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot> indicates where we want the content of the page to go. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>Our previous root layout will render. There is a <p><code><slot><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot> tag in the root layout. The content of the nested layout enters the root layout <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code><code><slot><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>. Finally, the nested layout defines its own <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code><code><slot> where the page content will be rendered. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712slot>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>If you navigate to the admin page, you should see a new red banner: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>Define data<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3>Okay, let's render some actual data - or at least see how we render some actual data. There are many ways to create and connect to a database. This post is about SvelteKit, not managing DynamoDB, so we will instead "load" some static data. However, we will use the same mechanism you use for real data to read and update it. For real web applications, replace the function that returns static data with the function that connects and querys any database you use. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>Let's create a very simple module in <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>libhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712todoData.ts<p> which returns some static data along with manual delays to simulate the actual query. You will see this <code>lib<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> folder imported elsewhere via <code>$lib<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>. This is what SvelteKit provides for that specific folder, and you can even add your own alias.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false">let todos = [
{ id: 1, title: "Write SvelteKit intro blog post", assigned: "Adam", tags: [1] },
{ id: 2, title: "Write SvelteKit advanced data loading blog post", assigned: "Adam", tags: [1] },
{ id: 3, title: "Prepare RenderATL talk", assigned: "Adam", tags: [2] },
{ id: 4, title: "Fix all SvelteKit bugs", assigned: "Rich", tags: [3] },
{ id: 5, title: "Edit Adam's blog posts", assigned: "Geoff", tags: [4] },
];
let tags = [
{ id: 1, name: "SvelteKit Content", color: "ded" },
{ id: 2, name: "Conferences", color: "purple" },
{ id: 3, name: "SvelteKit Development", color: "pink" },
{ id: 4, name: "CSS-Tricks Admin", color: "blue" },
];
export const wait = async (amount) => new Promise((res) => setTimeout(res, amount ?? 100));
export async function getTodos() {
await wait();
return todos;
}
export async function getTags() {
await wait();
return tags.reduce((lookup, tag) => {
lookup[tag.id] = tag;
return lookup;
}, {});
}
export async function getTodo(id) {
return todos.find((t) => t.id == id);
}<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>一个函数返回我们待办事项的扁平数组、我们的标签的查找以及获取单个待办事项的函数（我们将在“详细信息”页面中使用最后一个函数）。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3>加载数据<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>我们如何将这些数据放入我们的 Svelte 页面？方法有很多，但现在，让我们在 <code>list<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 文件夹中创建一个 <code> page.server.js<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 文件，并将此内容放在其中：<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false">import { getTodos, getTags } from "$libhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712todoData";
export function load() {
const todos = getTodos();
const tags = getTags();
return {
todos,
tags,
};
}<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>我们定义了一个 <code>load()<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 函数，它会提取页面所需的数据。请注意，我们<em>没有<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>等待对我们的 <code>getTodos<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 和 <code>getTags<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 异步函数的调用。这样做会创建一个数据加载瀑布，因为我们在加载标签之前等待待办事项进入。相反，我们从 <code>load<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> 返回原始 promise，SvelteKit 会执行必要的等待工作。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> So, how do we access this data from the page component? SvelteKit provides our component with a <code>data<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> attribute with data. We will access our to-dos and tags from it using reactive assignments. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>Our list page component now looks like this. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"><script>
export let data;
$: ({ todos, tags } = data);
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712script>
<table>
<thead>
<tr>
<th>Task<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<th>Tags<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<th>Assigned<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712th>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712tr>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712thead>
<tbody>
{#each todos as t}
<tr>
<td>{t.title}<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td>
<td>{t.tags.map((id) => tags[id].name).join(', ')}<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td>
<td>{t.assigned}<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712tr>
{https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712each}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712tbody>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712table>
<style>
th {
text-align: left;
}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>This should render our to-do list! <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3>Layout Group<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p> Before we move on to the Details page and mutated data, let's take a quick look at a very clever feature of SvelteKit: <strong>Layout Group<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong>. We've seen nested layouts for all management pages, but what if we want to share layouts between arbitrary pages on the same level in the file system? In particular, what if we just want to share the layout between our list page and the details page? We already have a global layout at that level. Instead, we can create a new directory, but the name should be placed in brackets, as follows: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>We now have a layout group covering the list and details pages. I named it <code>(todo-management)<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>, but you can name it whatever you like.It should be clear that this name <em> will not affect the URL of the page in the layout group. The URL will remain the same; the layout group allows you to add shared layouts to the page without them all forming part of the entire directory in <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>routes<code>. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>We<p> can<em> add a <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em> layout.svelte<code> file and some silly <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code><code> banner that says "Hey, we're managing to do things."But let's do something more interesting. The layout can define the <code>load()<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> function to provide data for all routes under it. Let's use this feature to load our tags – because we will use our tags in the details page – and the list page we already have. In fact, it is almost certainly not worth it to force the layout group just to provide a single data; it is best to copy that data in the <code>load()<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> function on each page. But for this post, it will provide an excuse we need to see new features of SvelteKit! <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>First, let's go to the <code> page.server.js<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> file of the list page and delete the tags from it. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false">import { getTodos } from "$libhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712todoData";
export function load() {
const todos = getTodos();
return {
todos,
};
}<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>Our list page should now produce an error because there is no <code>tags<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> object. Let's solve this problem by adding a <code> layout.server.js<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> file to the layout group, and then define a <code>load()<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> function that loads the tags. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false">import { getTags } from "$libhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712todoData";
export function load() {
const tags = getTags();
return {
tags,
};
}<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>In this way, our list page was rendered again! <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h4>We are loading data from multiple locations<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h4>
<p>Let's focus on what's going on here: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<ul>
<li>We define a <code>load()<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> function for the layout group, and we place it in <code> layout.server.js<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> . <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li>This provides data for all <strong> pages serving the layout - in this case, this means our list and details pages.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li>Our list page also defines a <code>load()<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> function located in its <code> page.server.js<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> file. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li>SvelteKit performs heavy lifting, merging the results of these data sources together and providing both in <code>data<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712ul>
<h3>Details Page<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>We will use the details page to edit the to-do list. First, let's add a column to the list page that links to the details page of the query string containing the to-do ID. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"><td><a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712details?id={t.id}">Edit<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712td><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>Let's build the details page now. First, we will add a loader to get the to-do item we are editing. Create a <code> page.server.js<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> in <code>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712details<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> with the following content: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false">import { getTodo } from "$libhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712todoData";
export function load({ url }) {
const id = url.searchParams.get("id");
const todo = getTodo(id);
return {
todo,
};
}<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>Our loader comes with the <code>url<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> attribute from which we can extract query string values. This makes it easy to find the to-do list we are editing. Let's render the to-do, and edit it's function. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>SvelteKit has excellent built-in mutability as long as you use the form. Remember the form? Here is our details page. For simplicity, I've omitted styles.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"><script>
import { enhance } from "$apphttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712forms";
export let data;
$: ({ todo, tags } = data);
$: currentTags = todo.tags.map((id) => tags[id]);
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712script>
<div>
{#each currentTags as tag}
{tag.name}
{https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712each}
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712div>
<form method="POST" action="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712editTodo" use:enhance>
<input type="hidden" name="id" value={todo.id} https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712>
<input type="text" name="title" bind:value={todo.title} https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712>
<button type="submit">Save<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712button>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712form><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>We get the label from the loader of the layout group as before and the to-do items from the loader of the page. We get the actual tag object from the to-do list of tag IDs and then render everything. We create a form with a hidden ID input and a real title input. We display the label and then provide a button to submit the form. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>If you notice <code>use:enhance<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>, this is just telling SvelteKit to use progressive enhancement and Ajax to submit our form. You may always use it. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h4>How do we save our edits? <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h4>
<p>Note the <code>action="?https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712editTodo"<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> attribute on the form itself? This tells us where we want to submit the edited data. For our case, we want to submit to a <code>editTodo<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>"action".<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>Let's create it by adding the following to the <code> page.server.js<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> file we already provide for "Details" (the file currently has a <code>load()<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> function to get our to-do items): <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false">import { redirect } from "@sveltejshttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712kit";
import { updateTodo, wait } from "$libhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712datahttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712todoData";
https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 ...
export const actions = {
async editTodo({ request }) {
const formData = await request.formData();
const id = formData.get("id");
const newTitle = formData.get("title");
await wait(250);
await updateTodo(id, newTitle);
throw redirect(303, "https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list");
},
};<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
The <p>Form action provides us with a <code>request<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> object that provides access to our <code>formData<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> which has a <code>get<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> method for our various form fields. We added a hidden ID value input so that we can get it here to find the to-do we are editing. We simulate the delay, call the new <code>updateTodo()<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> method, and redirect the user back to the <code>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> page. The <code>updateTodo()<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> method simply updates our static data; in real life, you will run some kind of update in any data store you use. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false">export async function updateTodo(id, newTitle) {
const todo = todos.find((t) => t.id == id);
Object.assign(todo, { title: newTitle });
}<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>Let's try it. We first go to the list page: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>Now, let's click the Edit button for one of the to-do items to bring up the edit page in <code>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712details<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>.<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>We will add a new title: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>Now, click Save.This should bring us back to the <code>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> page and apply the new to-do title. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>How did the new title appear? This is automatic. Once we redirect to the <code>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712list<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> page, SvelteKit will automatically rerun all our loaders as usual. This is a key advancement that new generation application frameworks like SvelteKit, Remix, and Next 13 offer. Instead of giving you a convenient way to render pages, then good luck getting any endpoints you may need to update your data, they integrate data mutation with data loading, allowing the two to work together. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>Some things you might want to know...<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p><strong>This mutation update doesn't seem too impressive. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong>The loader will run again while you navigate. What happens if we do not add a redirect in the form action, but instead stay on the current page? SvelteKit will perform updates in form operations as before, but will still rerun all loaders for the current page, including those in the page layout. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p><strong>Can we have a more targeted way to invalidate our data? <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong>For example, our tags are not edited, so in real life we don't want to re-query them. Yes, all I'm showing you is the default form behavior in SvelteKit. You can turn off the default behavior by providing a callback to <code>use:enhance<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>. SvelteKit then provides a manual failure function. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p><strong>Loading data every time you navigate can be expensive and unnecessary. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong>Can I cache this data like a tool like react-query? Yes, it's just different. SvelteKit allows you to set (and then respect) cache control headers that the Web has provided. I will introduce the cache failure mechanism in a subsequent article. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>We use static data throughout the article and modify values in memory. If you need to restore everything and start over, stop and restart the <code>npm run dev<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code> Node process. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3>Summary<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>We just touched the surface of SvelteKit, but hopefully you’ve seen something that’s enough to get you excited.I don't remember the last time I found web development so interesting. With out-of-the-box features like bundling, routing, SSR, and deployment, I can spend more time coding than configuring. <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>The following are some more resources you can use as the next steps to learn SvelteKit: <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<ul>
<li>Announced SvelteKit 1.0 (Svelte Blog)<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li>SvelteKit Beginner Course (Vercel)<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<li>SvelteKit Documentation<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712ul></style></https:></slot></https:></https:></https:></https:></a>
</li></https:></https:></a>
</li></https:></https:></a>
</li></https:></https:></a>
</li>
</ul></nav></pre></https:></https:>
The above is the detailed content of Getting Started With SvelteKit. For more information, please follow other related articles on the PHP Chinese website!