Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

185
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!