Question

163

Svelte store function update

rated 0 times [ 167] [ 4] / answers: 1 / hits: 11885 / 4 Years ago, mon, november 16, 2020, 12:00:00

Svelte store documentation shows String or Integer being updated, but I did not find any dynamic function in store.

I don't understand how to make the getData function as a writable in order to notify the html of the change.

In the following sample, I would like b to be shown after the updateKey function is called.

You will find a minimal code in REPL here: https://svelte.dev/repl/3c86bd48d5b5428daee514765c926e58?version=3.29.7

And the same code here in case REPL would be down:

App.svelte:

<script>

import { getData } from './store.js';

import { updateKey } from './store.js';

setTimeout(updateKey, 1000);

</script>



<h1>{getData()}!</h1>

store.js

import {setContext} from 'svelte';

import {writable} from 'svelte/store';



var data = {

    'a': 'a',

    'b': 'b'

};



var key = 'a';



export const getData = function() {

    return data[key];

}



export const updateKey = () => {

    key = 'b';

}

The goal is to work with a dynamic function in the store.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

katelynn

Add To Favorites

Follow

Total Points: 378

Total Questions: 86

Total Answers: 108

Location: Azerbaijan

Member since Fri, May 12, 2023

1 Year ago

katelynn questions

1 npm update is not updating the version in package.json file

Mon, Apr 4, 22, 00:00, 2 Years ago

1 How to fetch and display blob images

Fri, Mar 12, 21, 00:00, 3 Years ago

1 How can I use swiper on IE? is there any solution?

Thu, Jul 23, 20, 00:00, 4 Years ago

1 Frida - Calling a specific method overload

Wed, Apr 15, 20, 00:00, 4 Years ago

1 How may I upload file with formData to node js with express?

Wed, May 29, 19, 00:00, 5 Years ago

View All

answered 4 Years ago viridianaw · Accepted Answer

Well, I think you still have a bit of confusion about how things work in Svelte... Not sure how to best answer your question, so here's some code for what's you're trying to achieve, along with some comments. I hope it will help you better understand how things come together in regards to stores.

App.svelte

<script>

    import { onMount } from 'svelte'

    import { key, data, updateKey } from './store.js'



    onMount(() => {

        // it's not safe to have an unchecked timer running -- problems would

        // occur if the component is destroyed before the timeout has ellapsed,

        // that's why we're using the `onMount` lifecycle function and its

        // cleanup function here

        const timeout = setTimeout(updateKey, 1000);

        

        // this cleanup function is called when the component is destroyed

        return () => {

            clearTimeout(timeout)

        }

    })



    // this will log the value of the `key` store each time it changes, using

    // a reactive expression (a Sveltism)

    $: console.log($key)

</script>



<!--

  NOTE: we're using the $ prefix notation to access _the value_ of the store,

        and not `data`, which would be _the store itself_ (an object with

        subscribe, set, etc.)

  -->

<h1>{$data}</h1>

store.js

import { writable, derived } from 'svelte/store'



const db = {

    'a': 'a',

    'b': 'b'

}



// a writable store with initial value 'a'

export const key = writable('a')



export const updateKey = () => {

    // a writable store has a `set` method to change its value

    key.set('b')

}



// you can use a derived store to compute derived values from

// the current value of other stores

//

// here, we're getting the value from the db when the value of

// the `key` store changes

export const data = derived([key], ([$key]) => db[$key])