Sveltekit - change variable value of a component in +layout.page on route change

Question

I'm new to Svelte and SvelteKit, and I have the following problem:

I have a navbar component inside the lib folder which I made like this:

<script>
    import { store } from "../store";

    let title;

    store.subscribe((data) => {
        title = data.title;
    });
</script>

<ul class="nav align-items-center bg-light border-bottom border-black">
    <li class="nav-item flex-grow-1">
        <span
            class="nav-link fs-2 py-1 pe-0 ps-4 text-black fw-medium text-center"
            >{title}</span
        >
    </li>
    <li class="nav-item">
        <select
            class="form-select form-select-sm bg-light border-0 text-black text-decoration-underline"
        >
            <option value="EN">EN</option>
        </select>
    </li>
</ul>

Then I have this store:

import { writable } from "svelte/store";

export const store = writable({
    title: "Integma Check",
    plant: null,
    language: null,
    functions: null,
    checks: null,
});

I'm also using +layout.svelte:

<script>
    import Navbar from "../lib/Navbar.svelte";
</script>

<Navbar />
<slot />

Then I have some routes (+page.svelte).

My question is: how can I change the title variable of navbar component, on route change? Basically I want, if i go to route ABC, navbar title should be ABC, if I go back to home route, navbar title should be Integma Check (store default value). I tried playing with stores, to update the title, but on back button of the browser, the title stays as the last updated value...which I think is normal, because from what I understand, stores are like a global value or something. I also have a feeling the problem is somehow related with +layout.svelte. I also tried playing with onMount and onDestroy, but I get same results.

You should not manually subscribe to stores unless you also unsubscribe, otherwise you can run into issues. In components you can and should just use $store syntax instead. — brunnerh
– brunnerh, Commented Jul 25, 2023 at 16:40

brunnerh · Accepted Answer · 2023-07-25 16:50:01Z

0

You can react to route changes by subscribing to the page store or using afterNavigate. Which is better depends a bit on how the store is being interacted with.

If you were to create a separate store just for the title that does not require setting, you could just create a derived store that derives from page.

stores are like a global value

They are not. Anything exported from a module is "like a global value", this has nothing to do with stores. Generally I also would not recommend this, as it means you have to deal with all the downsides you get from having a singleton.

Instead you can inject stores into the application by setting them in a context, e.g. in the topmost layout.

answered Jul 25, 2023 at 16:50

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sveltekit - change variable value of a component in +layout.page on route change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related