Retrieve Data from Vuex Store using Axios

Question

I've been searching around for possible answers to my question but I couldn't find anymore suggestions.

The structure of my project is as follows. I have a PoolMainPage where I show some information of the activePool Object. Within the PoolMainPage there are options to direct to subpages (TeamSelector and PoolStandings), which also require information of the activePoolObject.

The activePool Object is fetched from an endpoint in the Vuex store. The code for that is the following:

const actions = {  
  getActivePool({ commit }) {
    const config = {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      withCredentials: true
    }
    const activePoolId = localStorage.getItem('activePoolId')
    if (activePoolId) {
      return axios.get('/pools/pool-information?poolId=' + activePoolId, config)
        .then((response) => {
          commit('SET_ACTIVE_POOL', response.data)
          return response
        })
        .catch((error) => {
          return Promise.reject(error)
        })
    } else {
      commit('SET_ACTIVE_POOL', null);
      return;
    }
  }
}

The endpoint does it's job and returns the activePool object. In my PoolMainPage component (as well as in the subcomponents) I want to call this action and fetch the object, using:

created() {
    if (!this.$store.getters.activePool) {
      this.$store.dispatch("getActivePool");
    }
  },

I added the check to prevent that the endpoint is called everytime the page is refreshed and the activePool is already set. To actually load the activePool into the component, I created a computed property:

computed: {
    activePool() {
      return this.$store.getters.activePool;
    },
  },

This all works when the endpoint has returned its data, but before that I receive an error on another computed property, which is dependent on the activePool object:

maxToSpend() {
      return this.activePool.inGameBudget;
    },

Question 1: how do I make sure that maxToSpend does not compute until the activePool actually set? I can simply add an additional check if (this.activePool) {, but then I would have to do that for all of the computed properties.

Question 2: I don't know if this is possible, but how do make sure that I don't have to add the code to fetch the activePool from the endpoint and get it using the computed property within each of the components that I created: TeamSelector and PoolStandings?

All help/suggestions are appreciated! Let me know if anything is unclear or requires some additional information.

Thanks!

Jeroen

Answer 1

How do I make sure that maxToSpend does not compute until the activePool actually set?

Basically you cannot do that. The computed properties are compute right after component create. See Lifecycle Diagram, computed properties are compute at Init injections & reactivity state.

I can simply add an additional check if (this.activePool) {, but then I would have to do that for all of the computed properties.

You case use Getters:

state: {
  ...
},
getters: {
  maxToSpend: state => {
    if (!state.activePool) return
    return state.activePool.inGameBudget
  }
},
actions: {
  ...
}

Then you can use as:

computed: {
  maxToSpend () {
    return this.$store.getters.maxToSpend
  }
}

I don't know if this is possible, but how do make sure that I don't have to add the code to fetch the activePool from the endpoint and get it using the computed property within each of the components that I created: TeamSelector and PoolStandings?

Basically no. But if both TeamSelector and PoolStandings have common a parent (might be PoolMainPage?) then you can call it only once from that parent.

In my opinion the way to explicitly dispatch mandatory action for every page its needed it's not a bad idea.