Vue.js - 在更新异步计算 属性 后更新计算 属性

Question

我有一个计算 属性 (filteredSyms)，它依赖于异步计算 属性 (allSynonyms)。我为此使用异步计算插件： https://www.npmjs.com/package/vue-async-computed。

但是，当数据更新时，计算 属性 不会等到异步 属性 更新的结果。因此，我收到的信息不是最新的。然后在异步 属性 实际上 return 计算出的新值 属性 不会再次 运行 更新。

我怎样才能让它按照计算机 属性 等待异步计算 属性 的结果的方式工作？

代码如下：

asyncComputed: {
  async allSynonyms() {
    let allSyns = await this.$axios.$post('/db/sym/synonyms', this.model.syms);
    return allSyns;
  }
},

computed: {
  filteredSyms() {

    let that = this;
    let allSyn = this.allSynonyms;

    let exactMatch = this.symsByRating.filter(
      function (v) {
        let isExactMatch = v.title.toLocaleLowerCase().indexOf(that.searchString.toLocaleLowerCase()) >= 0;

        return !that.idsToFilter.includes(v.id) && isExactMatch
          && (!that.currentBodyPart || v.bodyParts.indexOf(that.currentBodyPart) >= 0)
          && that.hasMoreSubsyms(v)
          && (!allSyn || !that.containsObject(v, allSyn))
          && (v.sex == that.model.sex || v.sex == 'NA');
      });

    let partialList = [];

    exactMatch.forEach(ex => partialList.push({n: 100, sym: ex}));

    for (let sym of this.symsByRating ) {

      let searchWords = this.searchString.toLocaleLowerCase().split(' ');
      let symWords = sym.title.toLocaleLowerCase().split(' ');

      let n = 0;
      let isPartialMatch = false;
      symLoop:for (let symWord of symWords) {
        symWord = symWord.substring(0, symWord.length - 1);
        for (let searchWord of searchWords) {

          // don't count last letters of the words
          searchWord = searchWord.substring(0, searchWord.length - 1);

          if (searchWord.length > 2 && symWord.indexOf(searchWord) >= 0) {
            n++;
            isPartialMatch = true;
          }
        }
      }

      if (exactMatch.indexOf(sym) < 0 && isPartialMatch
        && (!this.currentBodyPart || sym.bodyParts.indexOf(this.currentBodyPart) >= 0)
        && this.hasMoreSubsyms(sym)
        && (!allSyn || !this.containsObject(sym, allSyn))
        && (sym.sex == that.model.sex || sym.sex == 'NA')) {

        partialList.push({n: n, sym: sym});

      }
    }

    partialList.sort(function(obj1, obj2) {
      return obj2.n - obj1.n;
    });

    if (this.searchString && this.searchString != '') {
      partialList = this.filterSynonyms(partialList);
    }

    let fs = partialList.map(ws => ws.sym);

    console.dir(fs);

    return fs;

  }
}

很多东西都在 filtered 方法上，但我想这里的重点是它使用 this.allSynonyms 进行检查，但在执行 filteredSyms 时它不会更新。

感谢您的建议！

Answer 1

（我还没有真正测试过这个，但它应该可以工作。）

vue-async-computed 确实提供 this.$asyncComputed.allSynonyms.success 中的状态。

尝试将 this.$asyncComputed.allSynonyms.success 添加为 filteredSyms 的依赖项，它应该在成功状态更改时更新。