Vue-Router Data Fetch: Fetch Data before 'beforeRouteUpdate' loads component

Question

I am new to vue-router navigation guards and so I recently realized that I needed to use beforeRouteUpdate guard for reused components where for example: Going from /foo/1 to /foo/2

However, while coming to /foo/1, I pulled data from database through an axios call and before going to /foo/2, I need to pull new data again through the axios call.

This is where I face a problem where the navigation guard beforeRouteUpdate loads the component /foo/2 before my data loads from the axios call and thus I get null in a few of my variables.

How can I make beforeRouteUpdate wait to load the next component so that all my data is loaded from the axios calls?

As for my code, it looks like this:

beforeRouteUpdate (to, from, next) {
    Vue.set(this.$store.state.user, 'get_user', null)
    this.$store.dispatch(OTHER_PROFILE_GET, to.params.id).then(resp => {
      console.log(resp);
      if(this.$store.getters.is_user_loaded) {

        next()

      } else {

        this.$store.watch((state, getters) => getters.is_user_loaded, () => 
        {
          if(this.$store.getters.is_user_loaded) {
            console.log(this.$store.state.user.get_user);
            console.log('comes here');
            next()
          }
        })
      }
    })
},

To explain my code further, I have called this method in my component and so I when I go from /user/1 to /user/2 I dispatch a Vuex action which makes an axios call to get the new profile details but before the axios call completes and loads the data in the Vuex state, the beforeRouteUpdate already loads the next component.

What does your code look like? Have you followed the official guide? — Phil
I have updates my question with my code. As for the official guide, I have gone through that and other examples of beforeRouteUpdate to understand its proper use but wasn't able to solve the problem @Phil — pk_45
Don't forget to hit that "Save Edits" button when editing your question — Phil
You should only update state through a mutation, not directly (via Vue.set or otherwise) — Phil

Phil Phil · Accepted Answer · 2018-08-29T06:45:59

First, your action should perform any state mutation such as setting user.get_user to null. I'm also not sure why you've added a watch; your action should only resolve when complete. For example

actions: {
  [OTHER_PROFILE_GET] ({ commit }, id) {
    commit('clearUserGetUser') // sets state.user.get_user to null or something
    return axios.get(`/some/other/profile/${encodeURIComponent(id)}`).then(res => {
      commit('setSomeStateData', res.data) // mutate whatever needs to be set
    })
  }
}

then your route guard should have something like

beforeRouteUpdate (to, from, next) {
  this.$store.dispatch(OTHER_PROFILE_GET, to.params.id).then(next)
}

In order to prevent errors from trying to render null data, use your getters. For example, say your getter is

getters: {
  is_user_loaded (state) {
    return !!state.user.get_user
  }
}

in your component, you can map this to a computed property...

computed: {
  isUserLoaded () {
    return this.$store.getters.is_user_loaded // or use the mapGetters helper
  },
  user () {
    return this.$store.state.user.get_user // or use the mapState helper
  }
}

then in your template, use this logic to conditionally render some data

<div v-if="isUserLoaded">
  Hello {{user}}
</div>
<div v-else>
  Loading...
</div>

This is the suggested approach in the vue-router guide for beforeRouteUpdate

Vue-Router Data Fetch: Fetch Data before 'beforeRouteUpdate' loads component

1 Answers