Fetching before navigation with multiple components using vue-router










0















Trying to figure out what is the best way to fetch some data before navigating to some routes that I have.



My routes are:



let routes = [

path: '/',
component: require('./views/Home.vue')
,

path: '/messages',
component: require('./views/Messages.vue'),
,

path: '/posts',
component: require('./views/Post.vue'),
,

path: '/login',
component: require('./views/Login.vue')
,

path: '/dashboard',
component: require('./views/Dashboard.vue'),

];


For /messages, /posts and /dashboard I want to fetch some data and while doing that show a spinner.



Vue-router docs suggest to use beforeRouteEnter, Fetching Before Navigation



beforeRouteEnter (to, from, next) 
getPost(to.params.id, (err, post) =>
next(vm => vm.setData(err, post))
)



But my question is, must I implement this fetch logic in all my three view components?
Since it's the same data being fetched I don't want to repeat the logic in every component.



The beforeRouteEnter isn't called in my root component where I have this <router-view></router-view> otherwise I feel that it would be the best place to have this logic.



I'm really new to vue and this one is a really hard nut to crack for me.










share|improve this question


























    0















    Trying to figure out what is the best way to fetch some data before navigating to some routes that I have.



    My routes are:



    let routes = [

    path: '/',
    component: require('./views/Home.vue')
    ,

    path: '/messages',
    component: require('./views/Messages.vue'),
    ,

    path: '/posts',
    component: require('./views/Post.vue'),
    ,

    path: '/login',
    component: require('./views/Login.vue')
    ,

    path: '/dashboard',
    component: require('./views/Dashboard.vue'),

    ];


    For /messages, /posts and /dashboard I want to fetch some data and while doing that show a spinner.



    Vue-router docs suggest to use beforeRouteEnter, Fetching Before Navigation



    beforeRouteEnter (to, from, next) 
    getPost(to.params.id, (err, post) =>
    next(vm => vm.setData(err, post))
    )



    But my question is, must I implement this fetch logic in all my three view components?
    Since it's the same data being fetched I don't want to repeat the logic in every component.



    The beforeRouteEnter isn't called in my root component where I have this <router-view></router-view> otherwise I feel that it would be the best place to have this logic.



    I'm really new to vue and this one is a really hard nut to crack for me.










    share|improve this question
























      0












      0








      0








      Trying to figure out what is the best way to fetch some data before navigating to some routes that I have.



      My routes are:



      let routes = [

      path: '/',
      component: require('./views/Home.vue')
      ,

      path: '/messages',
      component: require('./views/Messages.vue'),
      ,

      path: '/posts',
      component: require('./views/Post.vue'),
      ,

      path: '/login',
      component: require('./views/Login.vue')
      ,

      path: '/dashboard',
      component: require('./views/Dashboard.vue'),

      ];


      For /messages, /posts and /dashboard I want to fetch some data and while doing that show a spinner.



      Vue-router docs suggest to use beforeRouteEnter, Fetching Before Navigation



      beforeRouteEnter (to, from, next) 
      getPost(to.params.id, (err, post) =>
      next(vm => vm.setData(err, post))
      )



      But my question is, must I implement this fetch logic in all my three view components?
      Since it's the same data being fetched I don't want to repeat the logic in every component.



      The beforeRouteEnter isn't called in my root component where I have this <router-view></router-view> otherwise I feel that it would be the best place to have this logic.



      I'm really new to vue and this one is a really hard nut to crack for me.










      share|improve this question














      Trying to figure out what is the best way to fetch some data before navigating to some routes that I have.



      My routes are:



      let routes = [

      path: '/',
      component: require('./views/Home.vue')
      ,

      path: '/messages',
      component: require('./views/Messages.vue'),
      ,

      path: '/posts',
      component: require('./views/Post.vue'),
      ,

      path: '/login',
      component: require('./views/Login.vue')
      ,

      path: '/dashboard',
      component: require('./views/Dashboard.vue'),

      ];


      For /messages, /posts and /dashboard I want to fetch some data and while doing that show a spinner.



      Vue-router docs suggest to use beforeRouteEnter, Fetching Before Navigation



      beforeRouteEnter (to, from, next) 
      getPost(to.params.id, (err, post) =>
      next(vm => vm.setData(err, post))
      )



      But my question is, must I implement this fetch logic in all my three view components?
      Since it's the same data being fetched I don't want to repeat the logic in every component.



      The beforeRouteEnter isn't called in my root component where I have this <router-view></router-view> otherwise I feel that it would be the best place to have this logic.



      I'm really new to vue and this one is a really hard nut to crack for me.







      vue.js vue-component vue-router






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 14 '18 at 18:20









      ToydorToydor

      1,15241641




      1,15241641






















          1 Answer
          1






          active

          oldest

          votes


















          1














          Are you aware of vuex? Since you need to share the same data on three different pages, which sounds like a job for vuex store. Basically you can import the store into your router, and set data in the store instead of on the component, and then you can conditionally fetch the data by checking the status of the data in the store and if the data already exists, don't fetch. Something like the following:



          import store from './store'

          beforeRouteEnter (to, from, next)
          if (store.state.post === null)
          getPost(to.params.id, (err, post) =>
          store.dispatch('setPost', post)
          next()
          )




          Assume your store has a state called post and action called setPost.



          const store = new Vuex.Store(
          state: post: null ,
          actions:
          setPost ( commit , post)
          // set the post state here


          )





          share|improve this answer

























          • Vuex sounds really nice, I'll check it out tnx! But I still need to have this code on every component to check if I have fetched the data to the store?

            – Toydor
            Nov 14 '18 at 20:20











          • You don't need this to be on the components. The first part sits in the router file where you use beforeRouteEnter to conditionally fetch data. The second part sits separately in a store.js which acts as a centralized data store for your application, and can be accessed from all components and pages, via the syntax this.$store

            – Psidom
            Nov 14 '18 at 20:26












          • beforeRouteEnter seems only to be available in component router.vuejs.org/guide/advanced/… . Or you mean I put the check in beforeEach in router file?

            – Toydor
            Nov 14 '18 at 20:54






          • 1





            Yeah. That's what I meant to say. Essentially check the route and store state in router with beforeEach or if you don't mind set up the logic in each of the three pages then I guess beforeRouteEnter is also doable especially if you refactor all the logic into the store action, then all you need to do in the component is beforeRouteEnter (to, from, next) this.$store.dispatch('getPost', to.params.id)

            – Psidom
            Nov 14 '18 at 20:59










          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306515%2ffetching-before-navigation-with-multiple-components-using-vue-router%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1














          Are you aware of vuex? Since you need to share the same data on three different pages, which sounds like a job for vuex store. Basically you can import the store into your router, and set data in the store instead of on the component, and then you can conditionally fetch the data by checking the status of the data in the store and if the data already exists, don't fetch. Something like the following:



          import store from './store'

          beforeRouteEnter (to, from, next)
          if (store.state.post === null)
          getPost(to.params.id, (err, post) =>
          store.dispatch('setPost', post)
          next()
          )




          Assume your store has a state called post and action called setPost.



          const store = new Vuex.Store(
          state: post: null ,
          actions:
          setPost ( commit , post)
          // set the post state here


          )





          share|improve this answer

























          • Vuex sounds really nice, I'll check it out tnx! But I still need to have this code on every component to check if I have fetched the data to the store?

            – Toydor
            Nov 14 '18 at 20:20











          • You don't need this to be on the components. The first part sits in the router file where you use beforeRouteEnter to conditionally fetch data. The second part sits separately in a store.js which acts as a centralized data store for your application, and can be accessed from all components and pages, via the syntax this.$store

            – Psidom
            Nov 14 '18 at 20:26












          • beforeRouteEnter seems only to be available in component router.vuejs.org/guide/advanced/… . Or you mean I put the check in beforeEach in router file?

            – Toydor
            Nov 14 '18 at 20:54






          • 1





            Yeah. That's what I meant to say. Essentially check the route and store state in router with beforeEach or if you don't mind set up the logic in each of the three pages then I guess beforeRouteEnter is also doable especially if you refactor all the logic into the store action, then all you need to do in the component is beforeRouteEnter (to, from, next) this.$store.dispatch('getPost', to.params.id)

            – Psidom
            Nov 14 '18 at 20:59















          1














          Are you aware of vuex? Since you need to share the same data on three different pages, which sounds like a job for vuex store. Basically you can import the store into your router, and set data in the store instead of on the component, and then you can conditionally fetch the data by checking the status of the data in the store and if the data already exists, don't fetch. Something like the following:



          import store from './store'

          beforeRouteEnter (to, from, next)
          if (store.state.post === null)
          getPost(to.params.id, (err, post) =>
          store.dispatch('setPost', post)
          next()
          )




          Assume your store has a state called post and action called setPost.



          const store = new Vuex.Store(
          state: post: null ,
          actions:
          setPost ( commit , post)
          // set the post state here


          )





          share|improve this answer

























          • Vuex sounds really nice, I'll check it out tnx! But I still need to have this code on every component to check if I have fetched the data to the store?

            – Toydor
            Nov 14 '18 at 20:20











          • You don't need this to be on the components. The first part sits in the router file where you use beforeRouteEnter to conditionally fetch data. The second part sits separately in a store.js which acts as a centralized data store for your application, and can be accessed from all components and pages, via the syntax this.$store

            – Psidom
            Nov 14 '18 at 20:26












          • beforeRouteEnter seems only to be available in component router.vuejs.org/guide/advanced/… . Or you mean I put the check in beforeEach in router file?

            – Toydor
            Nov 14 '18 at 20:54






          • 1





            Yeah. That's what I meant to say. Essentially check the route and store state in router with beforeEach or if you don't mind set up the logic in each of the three pages then I guess beforeRouteEnter is also doable especially if you refactor all the logic into the store action, then all you need to do in the component is beforeRouteEnter (to, from, next) this.$store.dispatch('getPost', to.params.id)

            – Psidom
            Nov 14 '18 at 20:59













          1












          1








          1







          Are you aware of vuex? Since you need to share the same data on three different pages, which sounds like a job for vuex store. Basically you can import the store into your router, and set data in the store instead of on the component, and then you can conditionally fetch the data by checking the status of the data in the store and if the data already exists, don't fetch. Something like the following:



          import store from './store'

          beforeRouteEnter (to, from, next)
          if (store.state.post === null)
          getPost(to.params.id, (err, post) =>
          store.dispatch('setPost', post)
          next()
          )




          Assume your store has a state called post and action called setPost.



          const store = new Vuex.Store(
          state: post: null ,
          actions:
          setPost ( commit , post)
          // set the post state here


          )





          share|improve this answer















          Are you aware of vuex? Since you need to share the same data on three different pages, which sounds like a job for vuex store. Basically you can import the store into your router, and set data in the store instead of on the component, and then you can conditionally fetch the data by checking the status of the data in the store and if the data already exists, don't fetch. Something like the following:



          import store from './store'

          beforeRouteEnter (to, from, next)
          if (store.state.post === null)
          getPost(to.params.id, (err, post) =>
          store.dispatch('setPost', post)
          next()
          )




          Assume your store has a state called post and action called setPost.



          const store = new Vuex.Store(
          state: post: null ,
          actions:
          setPost ( commit , post)
          // set the post state here


          )






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 14 '18 at 20:28

























          answered Nov 14 '18 at 18:34









          PsidomPsidom

          126k1290134




          126k1290134












          • Vuex sounds really nice, I'll check it out tnx! But I still need to have this code on every component to check if I have fetched the data to the store?

            – Toydor
            Nov 14 '18 at 20:20











          • You don't need this to be on the components. The first part sits in the router file where you use beforeRouteEnter to conditionally fetch data. The second part sits separately in a store.js which acts as a centralized data store for your application, and can be accessed from all components and pages, via the syntax this.$store

            – Psidom
            Nov 14 '18 at 20:26












          • beforeRouteEnter seems only to be available in component router.vuejs.org/guide/advanced/… . Or you mean I put the check in beforeEach in router file?

            – Toydor
            Nov 14 '18 at 20:54






          • 1





            Yeah. That's what I meant to say. Essentially check the route and store state in router with beforeEach or if you don't mind set up the logic in each of the three pages then I guess beforeRouteEnter is also doable especially if you refactor all the logic into the store action, then all you need to do in the component is beforeRouteEnter (to, from, next) this.$store.dispatch('getPost', to.params.id)

            – Psidom
            Nov 14 '18 at 20:59

















          • Vuex sounds really nice, I'll check it out tnx! But I still need to have this code on every component to check if I have fetched the data to the store?

            – Toydor
            Nov 14 '18 at 20:20











          • You don't need this to be on the components. The first part sits in the router file where you use beforeRouteEnter to conditionally fetch data. The second part sits separately in a store.js which acts as a centralized data store for your application, and can be accessed from all components and pages, via the syntax this.$store

            – Psidom
            Nov 14 '18 at 20:26












          • beforeRouteEnter seems only to be available in component router.vuejs.org/guide/advanced/… . Or you mean I put the check in beforeEach in router file?

            – Toydor
            Nov 14 '18 at 20:54






          • 1





            Yeah. That's what I meant to say. Essentially check the route and store state in router with beforeEach or if you don't mind set up the logic in each of the three pages then I guess beforeRouteEnter is also doable especially if you refactor all the logic into the store action, then all you need to do in the component is beforeRouteEnter (to, from, next) this.$store.dispatch('getPost', to.params.id)

            – Psidom
            Nov 14 '18 at 20:59
















          Vuex sounds really nice, I'll check it out tnx! But I still need to have this code on every component to check if I have fetched the data to the store?

          – Toydor
          Nov 14 '18 at 20:20





          Vuex sounds really nice, I'll check it out tnx! But I still need to have this code on every component to check if I have fetched the data to the store?

          – Toydor
          Nov 14 '18 at 20:20













          You don't need this to be on the components. The first part sits in the router file where you use beforeRouteEnter to conditionally fetch data. The second part sits separately in a store.js which acts as a centralized data store for your application, and can be accessed from all components and pages, via the syntax this.$store

          – Psidom
          Nov 14 '18 at 20:26






          You don't need this to be on the components. The first part sits in the router file where you use beforeRouteEnter to conditionally fetch data. The second part sits separately in a store.js which acts as a centralized data store for your application, and can be accessed from all components and pages, via the syntax this.$store

          – Psidom
          Nov 14 '18 at 20:26














          beforeRouteEnter seems only to be available in component router.vuejs.org/guide/advanced/… . Or you mean I put the check in beforeEach in router file?

          – Toydor
          Nov 14 '18 at 20:54





          beforeRouteEnter seems only to be available in component router.vuejs.org/guide/advanced/… . Or you mean I put the check in beforeEach in router file?

          – Toydor
          Nov 14 '18 at 20:54




          1




          1





          Yeah. That's what I meant to say. Essentially check the route and store state in router with beforeEach or if you don't mind set up the logic in each of the three pages then I guess beforeRouteEnter is also doable especially if you refactor all the logic into the store action, then all you need to do in the component is beforeRouteEnter (to, from, next) this.$store.dispatch('getPost', to.params.id)

          – Psidom
          Nov 14 '18 at 20:59





          Yeah. That's what I meant to say. Essentially check the route and store state in router with beforeEach or if you don't mind set up the logic in each of the three pages then I guess beforeRouteEnter is also doable especially if you refactor all the logic into the store action, then all you need to do in the component is beforeRouteEnter (to, from, next) this.$store.dispatch('getPost', to.params.id)

          – Psidom
          Nov 14 '18 at 20:59



















          draft saved

          draft discarded
















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306515%2ffetching-before-navigation-with-multiple-components-using-vue-router%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          這個網誌中的熱門文章

          How to read a connectionString WITH PROVIDER in .NET Core?

          In R, how to develop a multiplot heatmap.2 figure showing key labels successfully

          Museum of Modern and Contemporary Art of Trento and Rovereto