javascript - VueJS Vuex - 解决状态变化的 promise ？

Question

是否可以创建一个 Promise，一旦全局 vuex 存储中的变量发生变化，它就会解析？

我有一个变量在状态存储中初始化为 null 并将通过异步调用填充。
应用程序的不同部分取决于该变量是 true 还是 false 并且应该在它仍然是 null 时等待。

有没有办法干净地等待这个变量的变化？

Answer 1

您可以 vm.$watch在表达式或函数上，然后是 wrap that with a promise .

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

这会让你做类似的事情:

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

在异步函数中。

请注意，一般来说这不是一个很好的模式，在大多数情况下，使用 computed property 更可取且更简单。 (而不是 promise )。