Set a value to a Svelte 3 store
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.
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.
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))
What's the difference between store.update and store.set?
I guess only different is update also pass down the current state.