当我在模块文件中更新导入的变量时,它没有改变



导航栏.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}

收割台速度

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

从其他文件导入变量时,需要使用存储来获得反应性。Svelte编译器对正常变量提供的反应性仅在单个组件内和通过组件道具可用。

如前所述,您应该使用存储来共享变量并将其保存到上下文中,这样您就可以在索引中创建

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

然后在您的另一个组件中,您可以使用获取上下文数据

<script>
    import { getContext } from 'svelte';
    const pageStatus = getContext('pageStatus');
</script>
{#if $pageStatus.Home}
    <RenderSomethin/>
{/if}

最新更新