Sapper 在点击链接时没有重新加载数据

Question

我正在使用 sapper 构建一个网站并从 API 请求数据。到目前为止，它一直运行良好。

当我从 site.com/title/id1 转到 site.com/title/id2 时，在我手动刷新之前不会加载新信息。有什么想法吗？

import { stores, goto } from "@sapper/app";
import Card from "../_titlecard.svelte";

const { page } = stores();
const { slug } = $page.params;

import { onMount } from "svelte";
let looper = [];
let artistName = "";
let titleName = "";
let dvdCover = "";
let titleCover = "";
let genre = "";
let tracks = [];
onMount(async () => {
  const res = await fetch(`https://.com/api/title/${slug}`);

  const data = await res.json();

  artistName = data.artistName;
  titleName = data.name;
  dvdCover = data.graphics.dvd;
  titleCover = data.graphics.landscape;
  genre = data.genre;
  tracks = data.tracks.length;

  const res2 = await fetch(`https://.com/api/artists/all`);
  const data2 = await res2.json();

  let moreTitles = [];
  const more = data2.map((x) => {
    if (x.titles.length > 0 && x.genre === genre) {
      looper.push(x.titles[0]);

      looper = moreTitles;
    }
  });
});

然后我在 html 中有这个

{#each looper.slice(0, 4) as item, i} 
  <Card imgurl={item.graphics.dvd} concert={item.name} id={item.id} />
{/each}

Answer 1

如果导航导致使用相同的页面组件，则不会卸载并再次安装页面组件，因此您的 onMount 只会与第一个 id 一起运行一次。

您可以使用reactive statement 来确保每次$page.params.slug 更改时都运行所需的代码。

示例

import { stores, goto } from "@sapper/app";
import Card from "../_titlecard.svelte";
const { page } = stores();

let looper = [];
let artistName = "";
let titleName = "";
let dvdCover = "";
let titleCover = "";
let genre = "";
let tracks = [];

$: (async () => {
  const { slug } = $page.params;

  const res = await fetch(`https://.com/api/title/${slug}`);
  const data = await res.json();

  artistName = data.artistName;
  titleName = data.name;
  dvdCover = data.graphics.dvd;
  titleCover = data.graphics.landscape;
  genre = data.genre;
  tracks = data.tracks.length;

  const res2 = await fetch(`https://.com/api/artists/all`);
  const data2 = await res2.json();

  let moreTitles = [];
  data2.forEach((x) => {
    if (x.titles.length > 0 && x.genre === genre) {
      moreTitles.push(x.titles[0]);
    }
  });

  looper = moreTitles;
})();