What is the proper way to do Ajax call with computed properties from VueX Store

Question

How do I make ajax call with one of the call parameter being a computed State in VueX. For example, if I make this.$axios.get('someUrl/' + accID ), with accID being a computed property from VueX (via MapState). Sometimes id return 'undefined', which i suspect is due to axios making get request before the id data is populated from store

I have tried using watch() on 'accID' in Vue component to wait until accID resolve but to no avail

//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)

Expecting

this.$axios({ url:'food/12345', method: 'get' })

Instead

this.$axios({ url:'food/undefined', method: 'get' })

Answer 1

Change ${user.accID} to ${this.user.accID} in url:

url: `food/${this.user.accID}`,