Refreshing Page Data

A page you return to runs only pageReinit, pageBeforeIn and pageAfterIn. Store getters refresh it themselves; localStorage or server data needs these events. pageBeforeIn suits quick synchronous updates: the catalog's handler checks page.direction === 'backward', re-reads "Recently viewed" and calls $update() before the slide. pageAfterIn suits slow work that would stutter the slide; stop it on the way out:

    $on('pageAfterIn', () => {
      poll = setInterval(async () => {
        stock = await fetchStock(book.id);
        console.log(`book ${book.id} stock poll -> ${stock}`);
        $update();
      }, 1000);
    });
    $on('pageBeforeOut', () => clearInterval(poll));

Opening the notes and coming back:

--- tap Reading notes
    50 ms  home pageBeforeRemove previous -> undefined
    51 ms  home $onUnmounted
    58 ms  book pageBeforeOut current -> previous
   472 ms  book pageAfterOut current -> previous
--- tap Back
    50 ms  book pageReinit previous -> current
    51 ms  book pageBeforeIn previous -> current
   465 ms  book pageAfterIn previous -> current
   466 ms  home $onMounted
   466 ms  home pageMounted previous -> current
   466 ms  home pageInit previous -> current
  1624 ms  book 3 stock poll -> 0

No poll ran under the notes. And the catalog was destroyed when the notes opened, then rebuilt: the router keeps at most one page behind the current one, and preloadPreviousPage rebuilds the next one down on Back. pageInit can run many times for one screen, so lasting state belongs in the Store.