Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

created() hook twice on page refresh

Tags:

vue.js

vuejs2

on page refresh the created hook happen to be called twice for some weird reasons but that doesn't happen if I come from another route.

created() {         
    this.$store.dispatch('setInternalComponents',true);
    this.getCurrencies();              
},

you can find my router configuration below:

Vue.use(VueRouter);

const routes = [
  { path: "/", component: Auth },
  { path: "/resetpassword", component: Resetpwd },
  { path: "/forgotpassword", component: Forgotpwd },
  { path: "/firstlogin", component: FirstLogin},
  { 
    path: "/dashboard", 
    component: Dashboard,
    beforeEnter(to,from,next){
        if (store.state.accessToken)
        {
          next()
        }else
          next('/')
    }
  },
  { path: "*", redirect: "/" }
];

export default new VueRouter({
  routes: routes,
  mode: "history"
});
like image 821
Luigi Avatar asked Sep 05 '25 03:09

Luigi


1 Answers

I've fixed the issue myself. If we update the Vuex store on created/mounted hooks it will re-render the component so I moved the logic on the beforeEnter event in the routes configuration to avoid that behaviour.

code changed below:

{ 
    path: "/dashboard", 
    component: Dashboard,
    beforeEnter(to,from,next){
        if (store.state.accessToken)
        {
          store.dispatch('setInternalComponents',true);
          next()
        }else
          next('/')
    }
  },
like image 90
Luigi Avatar answered Sep 07 '25 21:09

Luigi