Posts Learn Components Snippets Categories Tags Tools new About
/

How to Watch Alpine.js Store Value

Learn how to watch Alpine.js store value

Created on Feb 15, 2022

417 views

In an Alpine.js store, you can make use of "Alpine.effect()" in order to watch the property. With the code example below, anytime the "name" property updates, the value will be console logged to the console devtool.
Alpine.store("alpineStore", {
    name: 'Hi Dad!',
    
    init() {
        Alpine.effect(() => {
            console.log(this.name);
        });
    },
});
Another way to watch an Alpine.js store property you can make use of the x-init directly on the alpine instance itself.
<div x-data x-init="$watch('$store.alpineStore.name', function (val) {
    console.log(val);
})"></div>
Now, anytime the "name" property is updated, the value of the name will be console logged to the console tab of the devtools.
I hope this tutorial is beneficial to you and if you do find it helpful do make sure to share it with your friends. Cheers and happy coding!

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for How to Watch Alpine.js Store Value

)