listening to changes to a store

[svefro]

is it possible to listen to change events from a store in javascript?

i have a store that contains user settings like so:

window.Alpine.store('config', {
  darkmode: false,
  hide_window_on_launch: false,
  hide_window_on_minimize: false
})

i want a event whenever these change.
it does not matter witch one changes.

I want to trigger a function that compares the values in the store with saved values and show a 'unsaved changes' label.

I not run the compare function using setInterval witch is not optimal.

something like this should work:

window.Alpine.effect(() => {
    let config_store = window.Alpine.store('config')
    console.log(config_store)
    
})

or attaching a changed function like this:

window.Alpine.store('config', {
  darkmode: false,
  hide_window_on_launch: false,
  hide_window_on_minimize: false,
  changed: function(){
     compare_with_saved_values_function()
  }
})

[ekwoka]

You need to just, at the start of the effect do

JSON.stringify(Alpine.store('config'))

This will deeply access all the properties so that it can listen for changes on anything.

[svefro]

Perfect :) Thanks a lot!

This should definitely be in the documentation under the Alpine.store section.

[ekwoka]

It's not related to stores though, it's just how the reactive proxies work.

Alpine effects are only reactive to the properties actually accessed in the effect function.

If you don't access the property, the effect won't be registered on it.

Stringifying the object is the best way to deeply access all properties.