How to Watch Alpine Stores for Changes

With Alpine 2.x and Spruce, you could define a global store and also a watcher for a particular store property:

Spruce.store('counter', {
    count: 0,
})

Spruce.watch('counter.count', () => {
    // Do something here...
})

Anytime the counter.count property was updated, the callback would be called.

With the introduction of Alpine.store in Alpine 3.x there is no longer a dedicated watch method for stores, but we can still get the same effect with Alpine.effect (no pun intended):

Alpine.store('counter', {
    count: 0,
})

Alpine.effect(() => {
    const count = Alpine.store('counter').count;

    // Now do something with `count`...
})

This works because Alpine will keep track of any dependencies / reactive properties we use inside of the callback and invoke it when any of them change.

Keep in mind that Alpine will run this callback function atleast once, so make sure you check for your initial state and prevent anything from happening.