Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

187
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda