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>