My imported variable isn't changing when I update it in the module file-CodePudding

navbar.ts

export let Home: boolean = true;
export let About: boolean = false;
export let Projects: boolean = false;
export let Contact: boolean = false;

export let pageStatus = {Home, About, Projects, Contact}

Header.svelte

import {pageStatus} from "$lib/header/navbar";
console.log(pageStatus)

CodePudding user response：

When importing variables from other files you need to use stores to get reactivity. Reactivity provided by the Svelte compiler on normal variables is only available within a single component and via component props.

CodePudding user response：

As already suggested, you should use the store to share variable and save it to context, so in your index, you can create

<script>
    import { setContext } from 'svelte';
    const pageStatus = writable({
        Home: true, 
        About: false, 
        Projects: false, 
        Contact: false,
    })

    setContext('pageStatus')
</script>

then in your other component you can get the context data using

<script>
    import { getContext } from 'svelte';
    const pageStatus = getContext('pageStatus');
</script>

{#if $pageStatus.Home}
    <RenderSomethin/>
{/if}