VueJS Vuex - 解决状态变化的承诺？

Question

是否可以创建一个 Promise 来在全局 vuex 存储中的变量发生更改时进行解析？

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

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

Answer 1

您可以vm.$watch在表达式或函数上，然后用 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

在一个async function.

请注意，通常这不是一个了不起的模式，在大多数情况下，为此使用计算属性（而不是承诺）更可取且更简单。