Как обновить контекст в svelte? - PullRequest
Новая
       10

Как обновить контекст в svelte?

0 голосов
/ 11 июля 2019

Функции 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>

1 Ответ

1 голос
/ 11 июля 2019

Используйте магазин : 

//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=3.6.7

...