Как привязать состояние стройного компонента к строке запроса в Sapper

Мое приложение sapper вращается вокруг компонента стола. Этот компонент таблицы имеет состояние (смещение, ограничение, сортировка, фильтры и т. Д.), Которое я хотел бы представить в строке запроса URL-адреса.

Таблица в настоящее время работает нормально, напрямую обновляя свое состояние:

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

Я вижу, что есть доступное только для чтения хранилище страниц, которое может предоставить мне доступ к текущему значению строки запроса. Я полагаю, что могу использовать что-то вроде URLSearchParams для создания ссылок с обновленным соответствующим значением.

Есть ли лучший способ справиться с этим (какой-либо способ напрямую привязать переменные к строке запроса)? Если нет, то как лучше всего сгенерировать ссылки с обновленными строками запроса?

РЕДАКТИРОВАТЬ:

Мое текущее решение - это следующая функция:

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)})}"

Это работает, но я чувствую, что должен быть способ получше


javascript svelte sapper svelte-store
person Philip C    schedule 23.06.2019    source источник

Ответы (1)


arrow_upward
18
arrow_downward

Вы можете получить доступ к состоянию строки запроса из хранилища 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>
person Rich Harris    schedule 24.06.2019
comment
Ух ты, ответ от самого создателя! Это определенно идея, но она становится более сложной, когда у вас есть произвольное количество вещей в строке запроса - я обновил вопрос с помощью метода, который мне нужно было написать - person Philip C; 25.06.2019
comment
что это за next функция? - person chovy; 14.12.2020