How can I use state rune to replace store

[J4gQBqqR]

Hi, I am really confused by the documentation. Could you help me understand if I need to wrap the state rune every single time in a function/class and use the getter/setter? Do I need to use new keyword to initiate a new instance for every single rune based store? I was able to export const a=writable(0) and that is it. Will I be able to use $state rune to declare a store replacement as concise as this? Do I have to go through all the stated procedures above just to use rune to replace store?

Than you for your help.

[paoloricciuti]

You can't really replace this exact store like this because it's a primitive. You can however replace an object store like this

export const a = $state({
    value: 0,
});

[Nelhoa]

Would it be a good practice to have only one $state object for multiple stores we used to manage with svelte 4 ?
Since now, it has fined grained reactivity, maybe instead of having multiple settings_foo / settings_bar stores we should only have export const settings = $state({foo:any, bar: any}) ?

[J4gQBqqR]

@paoloricciuti
Thank you. It works. Though, I am still confused why a primitive type is not working? It seems pretty intuitive that users might want to export a primitive state rune value and use it as a store replacement.

Another thing that I am confused is that why does the example here uses function/constructor and getter/setter to make things work. This example of comparing store vs state rune looks very unintuitive. The Gotcha Section at the bottom tricks me to think that I have to use getter function to make rune acting like store. Is there any reason why one wants to use a getter function instead of simply using:

export const a = $state({
    value: 0,
});

[J4gQBqqR]

@Nelhoa, I tried and can confirm that your pattern works. Your pattern of export const settings = $state({foo:any, bar: any}) is a good one to unclutter your "store" values because of fine grain reactivity. You can simply collect them together into an object and use settings.foo and settings.bar without worrying about redundant rendering.

[brunnerh]

I am still confused why a primitive type is not working?

This a regular JS characteristic. You also cannot export a plain primitive and change it but for an object you can mutate its properties. Primitives are passed by value, i.e. copied, objects are referenced.