Data Structures in PHP
Get 15% off with code BLOG15 

Ryan Chandler

How to Watch Alpine Stores for Changes

alpinejs
Table of Contents

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.

Comments (0)

What are your thoughts on "How to Watch Alpine Stores for Changes"?

You need to create an account to comment on this post.