Is there a way to make an AJAX call where one of the parameters is a computed State in VueX? For instance, if I use this.$axios.get('someUrl/' + accID ), with accID being a computed property from VueX (using MapState), sometimes it returns 'undefined'. I suspect this is because axios is making the get request before the id data is populated from the store.
I have attempted to use watch() on 'accID' in the Vue component to wait until accID resolves, but it hasn't been successful.
//some partial code
computed: {
...mapState(['user']),
},
async fetchData() {
const [foodData, option] = await Promise.all([
this.$axios({
url: `food/${this.user.accID}`,
method: 'get',
}),
this.$axios({
url: 'options',
method: 'get',
})
])
//foodData returns undefined because user.accID is undefined (sometimes)
Expected Output:
this.$axios({ url:'food/12345', method: 'get' })
Actual Output:
this.$axios({ url:'food/undefined', method: 'get' })