VueX - Access store.watch() inside a module action?

Is there a way to access the store.watch() method when I only have access to the context object inside a module’s action? While the context object includes some store methods like commit and dispatch, it doesn’t have access to watch.

I want this functionality because I am trying to integrate an api for music streaming where I am tracking the state of the audio playback using a VueX module. When api methods are called to control playback (start, pause, seek, etc.), they resolve when the command is acknowledged by the service but not when the playback state has been achieved. This will create race-conditions, so I am wrapping the api methods in actions that go as follows:

  1. create a watcher for a specific state (isPlaying === true, id === desiredId, etc.)
  2. call the api method
  3. await the watcher state
  4. resolve the action

Using store.watch() inside a module action would make this very simple to write:

async action(context, id) {
    const deferredPromise = new DeferredPromise();
    const unwatch = context.watch(
        context => context.state.currentState,
        currentState => {
            if (currentState === desiredState) deferredPromise.resolve();
        }
    );

    api.play(id);

    await deferredPromise;
    unwatch();

    return;
}
  • I already have a clunky work-around that periodically checks the state using looping timers, but I would like to leverage Vue’s watcher functionality because its much cleaner.
  • I understand if store.watch() is only meant to be used in components (in this case use a functional component?), but I would like to keep this api wrapper contained within it’s own VueX module if possible.

If this isn’t possible, is there another clean solution/pattern that could work?