javascript - 如何将 Svelte 组件的状态绑定(bind)到 Sapper 中的查询字符串

Question

我的 sapper 应用围绕着一个表格组件。此表组件具有我想在 URL 的查询字符串中表示的状态(偏移量、限制、排序、过滤器等)。

通过直接更新其状态，该表目前工作正常:

<button on:click="{() => offset += limit}" disabled="{offset + rows.length >= count}">»</button>

我看到页面只读存储可以让我访问查询字符串的当前值。我想我可以使用类似 URLSearchParams 的东西来生成相关值已更新的链接。

有没有更好的方法来处理这个问题(某种直接将变量绑定(bind)到查询字符串的方法)？如果不是，用更新的查询字符串生成链接的最佳方法是什么？

编辑:

我目前的解决方案是以下功能:

const getLink = queryStringDiff =>  {
  const query = $page.query;
  const path = $page.path;
  const str = Object.entries({...query, ...queryStringDiff}).reduce(
    (acc, cur) => `${acc}&${cur[0]}=${cur[1]}`, ''
  ).replace('&', '?');
  return `${path}${str}`;
}

我在 a 标签中引用，将上面的按钮替换为:

href="{getLink({'offset': (offset - limit)})}"

可以，但我觉得应该有更好的方法

Answer 1

您可以从 page 存储访问查询字符串状态:

<script>
  import { stores } from '@sapper/app';
  const { page } = stores();

  $: start = $page.query.p * $page.query.itemsPerPage;
  $: end = start + $page.query.itemsPerPage;

  $: slice = myData.slice(start, end); // plus filtering, sorting etc
</script>

<table>
  <thead>...</thead>
  <tbody>
    {#each slice as row}
      <tr>...</tr>
    {/each}
  </tbody>
</table>

<a href="my-table?p={$page.query.p + 1}">next</a>

如果需要以编程方式导航，可以使用goto:

<script>
  import { stores, goto } from '@sapper/app';

  // ...

  const next = () => {
    goto(`my-table?p=${$page.query.p + 1}`);
  };
</script>