Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

188
Vistas
Vue.js how to use Vuex getters to avoid hang out app

I'm truly dummy when it comes to the Vue, so sorry if my question is also dummy. I finally figured out how to make the request until I get the expected result in the response, code below:

fetch_all.vue

async mounted() {
  await fetchImportsProductsSyncStatusRequest(this)

  this.pullingImportsProductsSyncStatus = setInterval(() => {
    this.setInProgress()
    fetchImportsProductsSyncStatusRequest(this).then(response => {
      if (!this.$store.state.syncingProductsInProgress) {
        clearInterval(this.pullingImportsProductsSyncStatus);
        this.setSynced()
      }
    })
  }, 15000)
},

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import _get from 'lodash/get';
import { clearPersistedTokens } from '../auth_utils';

Vue.use(Vuex);

const storeSettings = {
  state: {
    syncingProductsInProgress: null
  },

But I think there is an issue with this solution. Checking state in response is causing the app to hang for 15s until next request will be fired and condition !this.$store.state.syncingProductsInProgress evaluated.

Would be better to use Vue getters (https://vuex.vuejs.org/guide/getters.html#the-mapgetters-helper) and import them as computed methods here? Probably I could also move status management from this component to Vuex store file to eliminate methods related to sync progress/status maybe?

How to move all of these into Vue getters and use them inside fetch_all.vue ?

[EDIT]

whole fetch_all.vue file with methods

<script>

import {
  fetchImportsProductsSyncStatusRequest,
} from '../../api/imports'

const STATUS_INITIAL = 0, STATUS_IN_PROGRESS = 1, STATUS_SUCCESS = 2, STATUS_SYNCED = 3;

export default {
  name: 'BackboneFetchAll',
  data() {
    return {
      syncCurrentStatus: null,
    }
  },
  async mounted() {
    await fetchImportsProductsSyncStatusRequest(this)

    this.pullingImportsProductsSyncStatus = setInterval(() => {
      this.setInProgress()
      fetchImportsProductsSyncStatusRequest(this).then(response => {
        if (!this.$store.state.syncingProductsInProgress) {
          clearInterval(this.pullingImportsProductsSyncStatus);
          this.setSynced()
        }
      })
    }, 15000)
  },

  methods: {
    setInProgress(data) {
      this.syncCurrentStatus = STATUS_IN_PROGRESS;
    },

    setSynced(data) {
      this.syncCurrentStatus = STATUS_SYNCED;
    },
  }
}
</script>
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda