Данные Svelte Sapper onMount обновляются только при входе в систему после перезагрузки страницы?

Я пытаюсь получить данные о компоненте из внешнего API. У меня есть запрос данных на компоненте боковой панели в блоке onMount.

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

Как я могу исправить этот процесс, чтобы полученные данные всегда были актуальны для вошедшего в систему пользователя?

Nav.svelte

Внутри компонента Nav у меня есть функция выхода из системы, где на панели навигации есть кнопка выхода.

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

Sidebar.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}

rest svelte sapper svelte-3 svelte-component
person Mike    schedule 11.06.2020    source источник
comment
Компонент Sidebar.svelte когда-нибудь отключается? В противном случае лучше всего использовать одну из ловушек жизненного цикла обновления.   -  person Gh05d    schedule 12.06.2020
comment
@ Gh05d Я устал размещать accountData в onDestroy. Ничего из того, что я пробую, похоже, не работает. Компонент уничтожается только в том случае, если компоненты не визуализируются. Этот компонент боковой панели всегда отображается, поскольку он вложен в навигацию, которая находится внутри файла _layout.svelte. Не уверен, что еще я могу попробовать здесь, чтобы обновить данные.   -  person Mike    schedule 13.06.2020
comment
Вы можете изучить функции жизненного цикла обновления и, возможно, функцию галочки. Может быть, передать свойство, которое инициирует повторную выборку?   -  person Gh05d    schedule 13.06.2020

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, вы хотите получать эти данные всякий раз, когда обновляется хранилище сеансов. Самый простой способ - использовать 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}
person Rich Harris    schedule 15.06.2020