Updating store after initialization for AlpineJS doesn't work

Question

To initialize a store I have

document.addEventListener('alpine:init', () => {
  Alpine.store('selectedInput', 0)
})

But when I do this in a function further down, it doesn't update selectedInput:

function example() {
  Alpine.store('selectedInput', 3)
}

Answer 1

Using an example from the documentation website - https://alpinejs.dev/globals/alpine-store

Alpine.store('darkMode', {
    on: false,

    toggle() {
        this.on = ! this.on
    }
})

darkMode is the name of your store. on is a property toggle is a function

So in your case, it should look something like this -

Alpine.store('nameOfStore', {
    selectedInput: 0,

    example() {
        this.selectedInput = 3
    }
})

You can replace nameOfStore with anything you like.

To call the function, you will do this - $store.nameOfStore.example()