Is it possible to create a Promise that resolves once a variable in the global vuex store changes?

I have a variable that is initialized as null in the state store and will be populated via an asynchronous call.
A different part of the app is dependent on that variable being true or false and is supposed to wait while it is still null.

Is there a way to cleanly wait for the change of this variable?

Is it possible to create a Promise that resolves once a variable in the global vuex store changes?

I have a variable that is initialized as null in the state store and will be populated via an asynchronous call.
A different part of the app is dependent on that variable being true or false and is supposed to wait while it is still null.

Is there a way to cleanly wait for the change of this variable?

• javascript
• vue.js
• promise
• vuejs2
• vuex

• Who makes the asynchronous call? Can't you just immediately populate the variable with the promise? – Bergi Commented Oct 6, 2018 at 14:32
• You mean put the promise itself in the global store? I haven't tried that yet but even if it would work, it doesn't quite feel right to me... Shouldn't the global state be in a defined state? I'd prefer to create a promise outside of it à la while(state.foo == undefined) { wait(100); } resolve(state.foo) but I don't know if that's possible and how to make that work... – TommyF Commented Oct 6, 2018 at 15:17

2 Answers 2

You can vm.$watch on an expression or function and then wrap that with a promise.

function watch(vm, fn) {
  return new Promise(resolve => {
    const watcher = vm.$watch(fn, (newVal) => {
      resolve(newVal);
      watcher(); // cleanup;
    });
  });
}

This would let you do something like:

let change = await watch(vm, () => state.foo); // will resolve when state.foo changes

Inside an async function.

Note in general this isn't a terrific pattern and in most cases it is preferable and simpler to use a puted property (and not a promise) for this.

Similar to Benjamin's answer and not exactly what you are asking for, just another option. Instead of watching state change you can subscribe to when a mutation of a specific type occurs and wrap that into a Promise.

new Promise(resolve => {
      let unsubscribeFn = this.$store.subscribe(mutation => {
        if (mutation.type === "MY_MUTATION") {
          unsubscribeFn();
          resolve();
        }
      });
    });