programing

Vue nexttick을 사용하기 위해 지연된 jquery를 변경하는 방법

goodcopy 2022. 7. 19. 21:38
반응형

Vue nexttick을 사용하기 위해 지연된 jquery를 변경하는 방법

nextTick이 지연보다 더 나은 선택이라고 읽었기 때문에 변경해야 합니다.

정상적으로 동작하는 원래의 코드는 다음과 같습니다.

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가 호출된 후 상태 데이터를 읽어내는 그리드를 확인해야 합니다.

도와주실 수 있나요?

지연 패턴은 일반적으로 특히 ES 약속과 반대되는 패턴입니다.그것은 다른 대안이 아니다.nextTick약속은 이미 비동기화 되어 있어 즉시 해결되는 약속은 약간의 지연을 가져옵니다. nextTick는, DOM 를 갱신할 수 있을 만큼 큰 지연을 제공합니다.

nextTick약속을 지지합니다만, 여기서는 필요 없습니다.

다음 중 하나여야 합니다.

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

Vuex 작업은 동작하는 데이터를 반환하지 않으므로 Vuex 작업은 반환되지 않습니다.res.

언급URL : https://stackoverflow.com/questions/70005818/how-to-change-jquery-deferred-to-use-vue-nexttick

반응형