Set a value to a Svelte 3 store

Tomasz Łakomy
InstructorTomasz Łakomy

Share this video with your friends

Send Tweet
Published 3 years ago
Updated a year ago

Sometimes we don't want to have a complicated update function to change a value of our store. We know exactly what we want to change the value to - we can just use the store.set function to do that.

In this lesson we're going to learn how to set a value to a Svelte 3 store by using the store.set function to set the value of a counter without having to increment/decrement it one by one.

Instructor: [0:00] We have an app with incrementer and decrementer components connected to the store. Whenever I click the button, the countValue is going to be updated.

[0:07] What we'd like to achieve is that instead of being clicking 10 times to get the number 15, I would like to input the number 15 over here and just update the count to 15.

[0:16] In order to do that, let's go to this Setter.svelte component. Here, import store from store. Store has a set method. With that, we can use to achieve this effect.

[0:29] What I am going to do now is that I am going to run store.set(event.target.value). If I save that, we have the desired effect. If I type in the number 20 over here, I can always set the count to 20. Of course, both decrementic and incrementic value still works.

Krit
Krit
~ 2 years ago

What's the difference between store.update and store.set?

I guess only different is update also pass down the current state.

Tomasz Łakomy
Tomasz Łakomyinstructor
~ 2 years ago

Thanks for asking!

‘store.update’ takes an update function as an argument and ‘store.set’ just sets the store value to whatever you provide to it.

~ a month ago

My code was malfunctioning when I clicked the increment button immediately after setting the store value via the input element. The increment store.update function (n=> n + 1) was interpreting the value as a string and appending 1 to the number. eg set value = 20, increment => 201, increment => 2011. Fixed it by adding parseInt to the Setter set function => set(parseInt(event.target.value))