Alpine.store('key') is reactive, $store.key is not

[ThatIsAPseudo]

Edit: added an even simpler example.

Hi,

I've got a hard time understanding the $store magic property, especially regarding reactivity. I don't understand why elements using $store as a source value aren't updating :

(I'm only using this HTML code, there's no JS script except the Alpine library)

<input type="text" x-model="$store.text">

<p>Using $store.text : <span x-text="$store.text"></span></p> <!-- this is NOT reactive -->
<p>Using Alpine.store('text') : <span x-text="Alpine.store('text')"></span></p> <!-- this is reactive -->

Could you please explain what is the difference between the two methods ? Am I using $store wrong ?
I've looked for similar discussions, but I didn't find one that would point out this particular issue as plainly.

Thanks

---

Original example :

<div>
    <input type="radio" id="1" name="radio" value="1" x-model.fill="$store.radioValue" checked>
    <label for="radio">1</label>
</div>

<div>
    <input type="radio" id="2" name="radio" value="2" x-model.fill="$store.radioValue">
    <label for="radio">2</label>
</div>

<div>
    <input type="radio" id="3" name="radio" value="3" x-model.fill="$store.radioValue">
    <label for="radio">3</label>
</div>

<p x-text="$store.radioValue"></p> <!-- this is NOT reactive -->
<p x-text="Alpine.store('radioValue')"></p> <!-- this is reactive -->

After clicking on the 2 radio button :

[ekwoka]

They should both be

[ThatIsAPseudo]

Hi, thanks for your answer, so the HTML snippet should indeed work as is, without JS ?

I tried tinkering around with script tags to make it work, surprisingly if I add this it works :

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store();
    })
</script>

Note that I'm not specifying any variable in the store method.
It looks like you must first initialize the "store" mecanism beforehand, which is not stated explicitely in the docs [1].

[1] https://alpinejs.dev/directives/model

[SimoTod]

First paragraph in the documentation page about stores:
"You can use $store to conveniently access global Alpine stores registered using Alpine.store(...)."

;)

[ekwoka]

Seems the issue is that you never actually made a store for text.

So when the $store.text ran, there is no text key that it attaches to.

[ThatIsAPseudo]

Thanks for your help.
Reading https://alpinejs.dev/globals/alpine-store#single-value-stores I thought you could skip the Alpine.store part and directly jump to $store if you have simple values.

However I'm still confused about Alpine.store() working. You don't actually need to declare each $store object, you can just initialize once for all. If that's the intended behavior maybe this could be explicited in the docs.

[ekwoka]

It's not intended that you create new stores like that.

[SimoTod]

Thanks for your help.
Reading https://alpinejs.dev/globals/alpine-store#single-value-stores I thought you could skip the Alpine.store part and directly jump to $store if you have simple values.

However I'm still confused about Alpine.store() working. You don't actually need to declare each $store object, you can just initialize once for all. If that's the intended behavior maybe this could be explicited in the docs.

Alpine.store working is an unexpected behaviour (nearly a bug). You always need to declare the variables you want to use in your stores, x-data or Alpine.data.
Why you wouldn't declare your variables anyway if you know that they must exist?
It's a bad habit to rely on a side effect to ensure something exists. If you have a different directive accessing the variable and for some reason you need to move the html tag before the input tags, it will error because the variable doesn't exist.