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

Question

I want to rerender "Body" (my svelte component) whenever "view.current" changes so it renders the corresponding.svelte view/component:我想在“view.current”发生变化时重新渲染“Body”（我的 svelte 组件），以便它呈现相应的.svelte 视图/组件：

App.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 />

In "Body.svelte" i just have a slot that gets styled在“Body.svelte”中，我只有一个可以设置样式的插槽

Body.svelte身材苗条

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

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

In Login.svelte (and other svelte components) i want to change "view.current":在 Login.svelte（和其他 svelte 组件）中，我想更改“view.current”：

Login.svelte登录.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商店.js

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

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

export {
    user,
    view
}

The value of "view.current" changes as expected, however "Body" does not update/rerender. “view.current”的值按预期更改，但“Body”不会更新/重新呈现。 So it always shows the login.svelte no matter to what "view.current" has been set.所以它总是显示 login.svelte 无论设置了什么“view.current”。 Is there a quick and easy way to make "Body" reactive to "view.current" so that it rerenders so that the if/else-block in "App.svelte" get's reevaluated?有没有一种快速简便的方法可以使“Body”对“view.current”做出反应，以便它重新呈现，以便重新评估“App.svelte”中的 if/else-block？

Answer 1

Importing a regular variable like that in a component creates a local copy of said variable.在组件中导入像这样的常规变量会创建该变量的本地副本。 The view you are referring to in the Login is not shared with the one in App, so the changes are not reflected there.您在登录中引用的view未与 App 中的视图共享，因此更改不会反映在那里。

The "Svelte-way" of sharing state like that accross components is to use a store .像这样跨组件共享 state 的“Svelte-way”是使用store 。

In your setup that would mean you define view as a store first:在您的设置中，这意味着您首先将视图定义为商店：

import { writable } from 'svelte/store'

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

In the components themselves you have to prefix the store with $在组件本身中，您必须在商店前加上$

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

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

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

问题描述

1 个解决方案

解决方案1
6 已采纳 2020-10-26 09:45:08

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

问题描述

1 个解决方案

解决方案1 6 已采纳 2020-10-26 09:45:08

解决方案1
6 已采纳 2020-10-26 09:45:08