title: How to bind a svelte component's state to the query string in Sapper
body: <p>My sapper app revolves around a table component. This table component has state (offset, limit, sort, filters, etc) that I would like to represent in the query string of the URL.</p>
  
  <p>The table works fine currently by directly updating its state:</p>
  
  <pre><code>&lt;button on:click="{() =&gt; offset += limit}" disabled="{offset + rows.length &gt;= count}"&gt;»&lt;/button&gt;
  </code></pre>
  
  <p>I see that there is the page read-only store which can give me access to the current value of the query string. I imagine I can use something like <code>URLSearchParams</code> to generate links with the relevant value updated.</p>
  
  <p>Is there a better way of handling this (some way of directly binding variables to the query string)? If not, what would be the best way to generate the links with the updated query strings?</p>
  
  <p>EDIT:</p>
  
  <p>My current solution is the following function:</p>
  
  <pre class="lang-js prettyprint-override"><code>const getLink = queryStringDiff =&gt;  {
    const query = $page.query;
    const path = $page.path;
    const str = Object.entries({...query, ...queryStringDiff}).reduce(
      (acc, cur) =&gt; `${acc}&amp;${cur[0]}=${cur[1]}`, ''
    ).replace('&amp;', '?');
    return `${path}${str}`;
  }
  </code></pre>
  
  <p>Which I reference in an <code>a</code> tag replacing the above button with:</p>
  
  <pre><code>href="{getLink({'offset': (offset - limit)})}"
  </code></pre>
  
  <p>It works, but I feel like there should be a better way</p>