Question

每当“ view.current”更改时，我都希望重新渲染“ Body”（我的苗条组件），以便呈现相应的.svelte视图/组件：

App.svelte

    <script>
    import Header from "./components/Header.svelte";
    import Footer from "./components/Footer.svelte";
    import Body from "./components/Body.svelte";

    import Login from "./views/Login.svelte";
    import Dashboard from "./views/Dashboard.svelte";

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

<Header />
    <Body>
        {#if view.current === view.login}
            <Login />
        {:else if view.current === view.dashboard}
            <Dashboard />
        {/if}
    </Body>
<Footer />

在“ Body.svelte”中，我只有一个可以样式化的插槽

Body.svelte

    <div class="container">
    <div class="content">
        <slot></slot>
    </div>
</div>

<style>
    .container {
        padding: 1em;
        display: flex;
    }
    .content {
        margin: auto;
    }
</style>

在Login.svelte（和其他svelte组件）中，我想更改“ view.current”：

Login.svelte

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

    function handleLoginClick() {
        view.current = view.dashboard;
    }
</script>


<button type="button" on:click={handleLoginClick} class="btn btn-primary btn-lg login-btn">Login</button>

<style>
    .login-btn {
        display: block;
        margin: auto;
    }
</style>

store.js

    const user = {
    username: "",
    fullname: "",
    role: null,
    isLoggedIn: false
};

const view = {
    login: 1,
    dashboard: 2,
    current: 1
};

export {
    user,
    view
}

“ view.current”的值按预期更改，但是“ Body”不更新/呈现。因此，无论设置了什么“ view.current”，它始终显示login.svelte。是否有一种快速简便的方法使“正文”对“ view.current”具有反应性，以便重新呈现它，以便重新评估“ App.svelte”中的if / else块？

Answer 1

将常规变量导入组件中会创建该变量的本地副本。您在登录名中所指的view未与App中的import { writable } from 'svelte/store' const view = writable({ login: 1, dashboard: 2, current: 1 });共享，因此更改不会在其中反映出来。

类似的跨组件共享状态的“简化方法”是使用store。

在您的设置中，这意味着您首先将视图定义为商店：

在组件本身中，您必须为商店添加<script> function handleLoginClick() { $view.current = $view.dashboard; } </script>

{#if $view.current === $view.login}
    <Login />
{:else if $view.current === $view.dashboard}
    <Dashboard />
{/if}

$baseUrl

苗条：使组件对变量具有反应性（渲染）

1 个答案: