Svelte：使组件对变量反应（重新渲染）答案

【问题标题】：Svelte: make component reactive to variable (rerender)Svelte：使组件对变量反应（重新渲染）
【发布时间】：2021-02-08 12:56:11
【问题描述】：

我想在“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（和其他苗条组件）中，我想更改“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。有没有一种快速简便的方法可以让“Body”对“view.current”做出反应，以便重新渲染，从而重新评估“App.svelte”中的 if/else 块？

【问题讨论】：

为什么要重新渲染Body 组件？
当 view.current 设置为“login”时，我想渲染 login.svelte 中的内容，当它设置为“dashboard”时，我想渲染“dashboard.svelte”等等开。
这是view 一家苗条的商店吗？
不，它只是一个js文件。我还尝试对 svelte.store 进行“查看”，但它的行为方式相同。我已经编辑了帖子并添加了 store.js 的内容。
尝试$: currentView = view.current; 并在标记中使用currentView？注意：我可能完全错了，我对 Svelte 还不是 100% 满意。

标签： javascript node.js svelte svelte-3 svelte-component

【解决方案1】：

在组件中导入类似的常规变量会创建所述变量的本地副本。您在登录中引用的view未与App中的@共享，因此更改不会反映在那里。

跨组件共享状态的“Svelte-way”是使用store。

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

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}

【讨论】：

谢谢你，这就行了。不知道它会创建它的本地副本。