Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How can I refresh a store in svelte?

In my svelte app I have a store with an empty list. The list might get populated later by an external function. How can I get the app to recognize the new data (in this case after two seconds have elapsed)?

REPL

App.svelte

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<script>
    import Cars from './Cars.svelte'
</script>

Cars.svelte

<div>
    {#each $cars as car}
        <p>{car}</p>
    {/each}
</div>
<button class="select-button">Save</button>


<script>
    import { cars } from './store.js'
    $cars = $cars
</script>

store.js

import { writable } from 'svelte/store'

let blank_cars = [];
let raw_cars = ['Audi', 'Aston Martin', 'BMW'];

export var cars = writable(blank_cars);

setTimeout(function() {
    cars = writable(raw_cars);
    console.log ('cars updated')
}, 2000)

>Solution :

use set instead of creating a new writable, like:

cars.set(raw_cars)

Working example: https://svelte.dev/repl/d2d602cd256844d883285c03b3537f9a?version=3.46.6

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading