Make use of this.$watch available in store objects #1782
Replies: 4 comments 3 replies
-
|
Interesting, I could see why that behavior would feel intuitive. (although currently not possible) What you CAN do in the meantime is use Alpine.store('something', {
foo: 'bar',
init() {
Alpine.effect(() => {
console.log('foo has changed to: ' + this.foo)
})
}
})Now every time $store.something.foo changes, the console will log out the message. This is the easiest way to watch store values. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot for your answer. This is working. I noticed that console log is called also when other store values are changed. Is there a way to check which value was changed? |
Beta Was this translation helpful? Give feedback.
-
|
Maybe an alternative approach to this is the answer from the above discussion #1599 |
Beta Was this translation helpful? Give feedback.
-
|
I am trying this idea. I define the global variable with Alpine.store and then I create a general wrapper of an Alpine component linked to the HTML body of the page running the watch.. Alpine.data('body',()=>({
init() {
this.$watch('$store.common.open',(value,oldvalue)=>{
console.log(oldvalue+'--'+value);
});
this.$watch('$store.common.menu',(value,oldvalue)=>{
console.log(oldvalue+'--'+value);
});
}
}));<body x-data="body">
@include('themes.default.body.app.index')
</body> |
Beta Was this translation helpful? Give feedback.
-
|
I used to do this too but I think it's better to define the watch with the Store definition for cases like this as shown here https://ryangjchandler.co.uk/posts/how-to-watch-alpine-stores-for-changes (using Alpine.effect) |
Beta Was this translation helpful? Give feedback.
-
|
@calebporzio Will this be implemented some time? Or is there a new way to achieve this since this discussion was created? |
Beta Was this translation helpful? Give feedback.
-
|
Alpine effect is still the best way to do it. and will be. |
Beta Was this translation helpful? Give feedback.
-
Currently I can't find a way to watch store values directly in the init function of the store.
Is there a way or can you make this.$watch also available in a Alpine.store object, as it is available within Alpine.data?
Thx in advance.
Beta Was this translation helpful? Give feedback.
All reactions