如何让Svelte布局数据兼具响应式与可修改性？

从+layout.ts返回大量数据，需要实现两个需求：

1. URL变化时数据同步更新；
2. 可通过UI输入、下拉框等元素修改filter、search、tag等参数。

+layout.ts

type NewsFilter = 'latest' | 'likes' | 'dislikes' | 'trending'

type LayoutLoadReturnType = {
    filter: NewsFilter;
    id: string | undefined;
    latestNewsPromise: Promise<{status: number; data: Array<{id: string; author: string; title: string; description: string;}>}>;
    search: string;
    symbolNames: {status: number, Array<{id: string; name: string; symbol: string}>};
    symbolRanks: {status: number, Array<{id: string; rank: number; symbol: string}>};
    tag: {id: string; name: string; symbol: string} | undefined;
    title: string | undefined;
    urlFriendlyTag: string;
};

export const load: LayoutLoad = ({ data, fetch, params, url }): LayoutLoadReturnType => {
    const filter = (url.searchParams.get('filter') as NewsFilter) || 'latest';
    const id = params.id;
    const search = url.searchParams.get('search') || '';
    const title = params.title;
    const urlFriendlyTag = params.tag || 'all';

    const { symbolNames, symbolRanks } = data;

    const tag = getTagFromUrlFriendlyTag(urlFriendlyTag, symbolNames.data);

    let endpoint;
    if (typeof id !== 'undefined' && id !== null && isValidId(id)) {
        endpoint = getNewsListWithItemEndpoint(filter, id, undefined, undefined, search, tag);
    } else {
        endpoint = getNewsListEndpoint(filter, undefined, undefined, search, tag);
    }

    return {
        filter,
        id,
        latestNewsPromise: fetch(endpoint).then((r) => r.json()),
        search,
        symbolNames,
        symbolRanks,
        tag,
        title,
        urlFriendlyTag
    };
};

已尝试方案 #

方案1 #

• 问题：修改URL后数据值不更新

<script lang="ts">
const {children, data}=$props();

let filter = $state(data.filter);
let search = $state(data.search);
let tag = $state(data.tag);
let urlFriendlyTag = $state(data.urlFriendlyTag);

let newsItems = $state([]);
data.latestNewsPromise.then((items) => {
  newsItems.push(...items)
})

async function loadMore() {
  const {data} = await fetch(getNextPageEndpoint());
  newsItems.push(...items)
}

</script>

<input bind:value="search" />
<a href="/news/?filter=likes">View liked news</a>
<a href="/news/?filter=trending">View trending news</a>
<!-- ... Options to navigate to news items with different tags via url -->

方案2 #

• 问题：无法修改参数值

<script lang="ts">
const {children, data}=$props();

let filter = $derived(data.filter);
let search = $derived(data.search);
let tag = $derived(data.tag);
let urlFriendlyTag = $derived(data.urlFriendlyTag);

let newsItems = $state([]);
data.latestNewsPromise.then((items) => {
  newsItems.push(...items)
})

async function loadMore() {
  const {data} = await fetch(getNextPageEndpoint());
  newsItems.push(...items)
}

</script>

<input bind:value="search" />
<a href="/news/?filter=likes">View liked news</a>
<a href="/news/?filter=trending">View trending news</a>
<!-- ... Options to navigate to news items with different tags via url -->

解决方案 #

核心思路是利用SvelteKit的$page响应式对象监听URL变化，同时在UI修改参数时更新URL，触发+layout.ts重新加载数据。

修改后的+layout.svelte代码：

<script lang="ts">
import { page } from '$app/stores';
import { goto } from '$app/navigation';
const { children, data } = $props();

// 从$page中派生当前参数，URL变化时自动同步
const currentFilter = $derived(($page.url.searchParams.get('filter') as NewsFilter) || 'latest');
const currentSearch = $derived($page.url.searchParams.get('search') || '');
const currentUrlFriendlyTag = $derived($page.params.tag || 'all');

// 用$await简化异步数据处理（Svelte 4+支持）
const newsResult = $await(data.latestNewsPromise);
const newsItems = $derived(newsResult?.data || []);

// UI修改filter时更新URL
async function updateFilter(newFilter: NewsFilter) {
  const url = new URL($page.url);
  url.searchParams.set('filter', newFilter);
  await goto(url.toString());
}

// UI修改search时更新URL
async function updateSearch(newSearch: string) {
  const url = new URL($page.url);
  newSearch ? url.searchParams.set('search', newSearch) : url.searchParams.delete('search');
  await goto(url.toString());
}

// UI修改tag时更新URL（需根据实际路由结构调整）
async function updateTag(newUrlFriendlyTag: string) {
  const url = new URL($page.url);
  const pathSegments = url.pathname.split('/');
  // 假设路由为/news/[tag]，替换对应位置的tag值
  pathSegments[2] = newUrlFriendlyTag;
  url.pathname = pathSegments.join('/');
  await goto(url.toString());
}

async function loadMore() {
  // 根据当前参数生成下一页接口地址
  const endpoint = getNextPageEndpoint(currentFilter, currentSearch, currentUrlFriendlyTag);
  const response = await fetch(endpoint);
  const nextData = await response.json();
  // 若需保留历史数据，可将newsItems改为$state类型，此处push新数据
}
</script>

<!-- 搜索输入框 -->
<input 
  value={currentSearch} 
  on:input={(e) => updateSearch((e.target as HTMLInputElement).value)} 
  placeholder="搜索新闻"
/>

<!-- Filter切换按钮 -->
<button on:click={() => updateFilter('latest')}>最新</button>
<button on:click={() => updateFilter('likes')}>点赞最多</button>
<button on:click={() => updateFilter('trending')}>热门</button>

<!-- Tag下拉选择框 -->
<select 
  value={currentUrlFriendlyTag} 
  on:change={(e) => updateTag((e.target as HTMLSelectElement).value)}
>
  <option value="all">全部标签</option>
  {#each data.symbolNames.data as symbol}
    <option value={symbol.symbol}>{symbol.name}</option>
  {/each}
</select>

<!-- 新闻列表展示 -->
{#each newsItems as item}
  <div>
    <h3>{item.title}</h3>
    <p>{item.description}</p>
    <span>作者: {item.author}</span>
  </div>
{/each}

<button on:click={loadMore} disabled={!newsResult || newsResult.data.length === 0}>加载更多</button>

{@render children}

关键说明 #

1. 响应URL变化：通过$page store派生参数，URL修改（如点击链接、浏览器前进后退）时，参数会自动更新，同时+layout.ts的load函数会重新执行，获取最新数据。
2. UI与URL双向同步：通过goto方法更新URL的查询参数或路径参数，触发路由更新，进而让+layout.ts重新加载数据，实现UI操作同步到URL。
3. 异步数据处理：使用$await简化Promise处理，避免手动调用then的繁琐；若需保留加载更多的历史数据，可将newsItems改为$state类型，在loadMore时追加新数据。

内容的提问来源于stack exchange，提问作者PirateApp