如何在 Svelte 中更新上下文？

Question

getContext和setContext函数只能在组件初始化期间调用。是否有一种方法可以在运行时更新上下文值，例如在单击事件上。 想象一下，我们将主题或本地化存储在上下文值中，并希望创建一个按钮来更改它。有可能吗？ 我尝试使用变量设置上下文并更新该变量，但它没有起作用。像这样：

//App.svelte
<script>
    import {setContext} from 'svelte';
    import Name from './components/Name.svelte';
    let name = 'John';
    setContext('name',name);
    function changeName(){
        /// how to update context here ?
        name = 'Mike'; // Doesn't work!!!
        // setContext('name',name);// Doesn't work - Errors
    }
</script>
<Name></Name>
<button on:click={changeName}>Change Name</button>

//Name.svelte
<script>
    import {getContext} from 'svelte';
    let name = getContext('name');
</script>

<h1> My name is: {name}</h1>

- Tiago Nobrega

Answer 1

使用一个商店：

<!-- App.svelte -->
<script>
    import {setContext} from 'svelte';
    import {writable} from 'svelte/store';
    import Name from './components/Name.svelte';

    let name = writable('John');
    setContext('name',name);

    function changeName(){
        $name = 'Mike';
    }
</script>
<Name></Name>
<button on:click={changeName}>Change Name</button>

<!-- Name.svelte -->
<script>
    import {getContext} from 'svelte';
    let name = getContext('name');
</script>

<h1> My name is: {$name}</h1>

演示：https://svelte.dev/repl/432d3449cd9b4e5d99a303fa143b3dbc?version=4.2.0

- Rich Harris

---

据我所知，存储库在任何地方都可以使用，并且仅限于子组件的上下文，这是限制存储库可用性的一种方式吗？还有哪些其他用途可以采用这种方法？ - gajo357

@gajo357：这是一个误解，商店与“随处可得”无关。任何直接从模块导出的东西都可以在任何地方导入。（这主要是给其他人的一个提示。） - undefined