rest - Svelte Sapper onMount 数据仅在页面重新加载后在登录时更新？

Question

我正在尝试从外部 api 获取组件上的数据。我在 onMount 块中的侧边栏组件上有数据请求。

当用户登录并使用侧边栏路由到页面时，显示的数据来自上次会话。我需要刷新页面才能查看当前数据。

如何修复此过程，以便获取的数据始终是登录用户的最新数据？

导航苗条

在导航组件内部，我有注销功能，导航上有一个注销按钮。

async function logout() {
    await post(`auth/logout`);
    session.set({ token: null, user: null })
    goto("/");
  }

侧边栏.svelte

在侧边栏组件内，我向 api 请求数据。

<script>
import { goto, stores } from "@sapper/app";
const { session } = stores();

let accountData = [];

onMount(async () => {
    if ($session.token) {
        const res = await api.get(`accounts`, $session.token, $session.user._id)
        accountData = res.data;
    } else {
        accountData = [];
    }
})
</script>

{#each accountData as item}
  <div>
    <h3>{item.accountName}</h3>
    <p>{item._id}</p>
  </div>
{/each}

Answer 1

听起来您想在会话存储更新时获取该数据。最简单的方法可能是使用session.subscribe：

<script>
import { onMount } from "svelte";
import { goto, stores } from "@sapper/app";
const { session } = stores();

let accountData = [];

onMount(() => {
    const unsubscribe = session.subscribe(async ($session) => {
        if ($session.token) {
            const res = await api.get(`accounts`, $session.token, $session.user._id)
            accountData = res.data;
        } else {
            accountData = [];
        }
    });

    return unsubscribe;
});
</script>

{#each accountData as item}
  <div>
    <h3>{item.accountName}</h3>
    <p>{item._id}</p>
  </div>
{/each}