Spruce.watch() alternative?

[chapmanjacobd]

How do I do something like this in Alpine v3?

Object.keys(defaultSettings).forEach((key, index) => {
    Spruce.watch(`settings.${key}`, (next) => {
      setQueryStringParameter(key, encodeURIComponent(JSON.stringify(next)));
    });
});

[danddanddand]

There are a few ways but not as clean/strait forward as it was in Spruce. This is a method I’m using in some stores just to keep the code sort of in same place it was with Spruce:

Alpine.store( ‘settings’, {
   …
   setupWatchers( watch ) {
      Object.keys(defaultSettings).forEach((key, index) => {
    watch(`$store.settings.${key}`, (next) => {
      setQueryStringParameter(key, encodeURIComponent(JSON.stringify(next)));
    });
});
   }
  … 
} );

And in component that ties into this store I just do something like <div x-data x-init=“$store.settings.setupWatchers($watch)”></div>

You could also move that watch into a component but I like it with store and just pass watch magic to it which is just doing Alpine.effect(()=>{}) with store.
(Note: sorry I’m typing on iPad)

This shows alternative strategy using Alpine.effect (I’ve been lazy and have not tried it yet): #1506 (reply in thread)

[calebporzio]

Like @danddanddand is saying you can use Alpine.effect instead of a manual watcher:

Alpine.effect(() => {
  Object.keys(defaultSettings).forEach((key, index) => {
        let value = Alpine.store('settings')[key]

        setQueryStringParameter(key, encodeURIComponent(JSON.stringify(value)));
  });
})

[ryangjchandler]

I'm currently working on an upgrade guide for Spruce for those upgrading from Alpine 2.x to 3.x so hopefully these sort of questions should stop coming up.