Necesito cambiar esto porque he leído que nextTick es una mejor opción en comparación con diferido.
Este es el código original que funciona bien:
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() }) }Sin embargo, no puedo volver a trabajar con nextTick:
loadData: filters => { this.fetchOverdraftLogs({ params: this.filtersToSend(filters) }) this.$nextTick(() => { this.setFilterValues() this.getOverdraftLogs }) }Necesito asegurarme de que la cuadrícula después de llamar a la API lea los datos del estado.
¿Podrías ayudar?
El patrón diferido es generalmente un antipatrón, especialmente con promesas de ES. No es una alternativa a nextTick . Las promesas ya son asincrónicas, una promesa que se resuelve instantáneamente proporciona un pequeño retraso. nextTick proporciona un retraso que es lo suficientemente grande como para que el DOM se actualice.
nextTick admite promesas, pero aquí no es necesario.
Debería ser:
loadData: filters => { return this.fetchOverdraftLogs({ params: this.filtersToSend(filters) }) .then(() => { this.setFilterValues() return this.getOverdraftLogs; }) } Se supone que las acciones de Vuex no devuelven los datos en los que operan, por lo que no debería haber res .