如何更改 jquery Deferred 以使用 Vue nexttick？

Question

我需要更改此设置，因为我已阅读 nextTick 与 deferred 相比是更好的选择。

这是运行良好的原始代码：

methods: {
    ...mapActions(['fetchOverdraftLogs', 'setOverdraftFilters', 'fetchUserEventsCsvFile']),
},
  computed: {
    ...mapGetters(['getOverdraftLogs'])
  },
...
        loadData: filters => {
          const d = $.Deferred()
          this.fetchOverdraftLogs({ params: this.filtersToSend(filters) })
            .then(res => {
              d.resolve(this.getOverdraftLogs)
              this.setFilterValues()
            })
          return d.promise()
        })
        }

但是，我无法使用 nextTick 进行修改：

loadData: filters => {
  this.fetchOverdraftLogs({ params: this.filtersToSend(filters) })
  this.$nextTick(() => {
    this.setFilterValues()
    this.getOverdraftLogs
  })
}

我需要确保网格在调用 API 之后从状态中读取数据。

你能帮忙吗？

Answer 1

延迟模式通常是一种反模式，尤其是对于 ES 承诺。它不是 nextTick 的替代品。承诺已经是异步的，立即解决的承诺提供了一个小的延迟。 nextTick 提供足够大的延迟 DOM 进行更新。

nextTick 支持 promises 但这里不需要。

应该是：

    loadData: filters => {
      return this.fetchOverdraftLogs({ params: this.filtersToSend(filters) })
        .then(() => {
          this.setFilterValues()
          return this.getOverdraftLogs;
        })
    }

Vuex 动作不应该 return 它们操作的数据，所以不应该有 res。

如何更改 jquery Deferred 以使用 Vue nexttick？

How to change jquery Deferred to use Vue nexttick?

javascript

deferred

vue.js

vuex