Accessing Vuex store in router.ts file












0















i am trying to access vuex store value in router.ts but unable. I have googled it alot but found no stuff. In App.Vue i can access store values using this.$store but not working in .ts files.



--router.ts



import Vue from 'vue';
import Router from 'vue-router';
import StudentList from './views/admin/StudentList.vue';
import Questions from './views/admin/TemplateQuestions.vue';
import WelcomePage from './views/student/WelcomePage.vue';
import store from './store/store';

Vue.use(Router);


const router = new Router({
// mode: 'history',
routes: [
{
path: '/',
name: 'Questons',
component: Questions,
meta: { index: 0, IsAdmin: true},
},
{
path: '/Students',
name: 'StudentList',
component: StudentList,
meta: { index: 1, IsAdmin: true},
},
{
path: '/StudentIntro',
name: 'WelcomePage',
component: WelcomePage,
meta: { index: 1, IsAdmin: false, IsStudent: store.getters.IsStudent },

},
],
});

router.beforeEach((to: any, from: any, next: any) => {
debugger;
let IsStudent = store.getters.IsStudent; // store is always undefined here
if (!!IsStudent) {
debugger;
}
if (to.meta.IsAdmin === true && IsStudent === true) {
next({ name: 'WelcomePage' });
} else {
next();
}
});

export default router;


--main.ts



import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store/store';
import './registerServiceWorker';
import VueResource from 'vue-resource';
import Notifications from 'vue-notification';


// Custom Imports Start
import * as jQuery from 'jquery';
const $ = jQuery;
import './assets/css/style.css';
import './assets/js/go-to-up';
import 'bootstrap';
// Custom Imports End


Vue.use(VueResource);
Vue.config.productionTip = false;
Vue.use(Notifications);

export default new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');


--store.ts



import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);

export default new Vuex.Store({
state: {
Languages: ,
IsStudent: false,
},
mutations: {
setLanguages: (state, values) => {
values.forEach((x: any) => {
return x.IsSelected = false;
});
values[0].IsSelected = true;
state.Languages = values;
},
changeLanguages: (state, LCID) => {
state.Languages.forEach((x: any) => {
if (x.LCID === LCID) {
return x.IsSelected = true;
} else {
return x.IsSelected = false;
}
});
},
setIsStudent: (state, value) => {
state.IsStudent = value;
},
},
actions: {
setLanguages: (context, values) => {
context.commit('setLanguages', values);
},
changeLanguages: (context, value) => {
context.commit('changeLanguages', value);
},
setIsStudent: (context, value) => {
context.commit('setIsStudent', value);
},
},
getters: {
selectedLanguage(state) {
const lst = (state.Languages as any).filter(
(l: any) => l.IsSelected === true,
);
if (lst.count > 0) {
return lst[0].LCID;
} else {
return -1;
}
},
IsStudent(state) {
return state.IsStudent;
},
},
});


Thanks in advance for help :) before any route call i want to get role from server and on base of that role i want to apply authentication










share|improve this question























  • Have you figured it out yet? I can access vuex store correctly inside my router.ts.

    – Jeremy Walters
    Jan 8 at 7:03











  • no. can you please share some working code example

    – Muhammad Atif
    Jan 10 at 9:44











  • I am busy looking into more details. One thing though for some reason store would appear undefined if you look at it through devtools. Could you try it like this : const test = store; debugger; . THen check the value of test in your devtools

    – Jeremy Walters
    Jan 10 at 10:50


















0















i am trying to access vuex store value in router.ts but unable. I have googled it alot but found no stuff. In App.Vue i can access store values using this.$store but not working in .ts files.



--router.ts



import Vue from 'vue';
import Router from 'vue-router';
import StudentList from './views/admin/StudentList.vue';
import Questions from './views/admin/TemplateQuestions.vue';
import WelcomePage from './views/student/WelcomePage.vue';
import store from './store/store';

Vue.use(Router);


const router = new Router({
// mode: 'history',
routes: [
{
path: '/',
name: 'Questons',
component: Questions,
meta: { index: 0, IsAdmin: true},
},
{
path: '/Students',
name: 'StudentList',
component: StudentList,
meta: { index: 1, IsAdmin: true},
},
{
path: '/StudentIntro',
name: 'WelcomePage',
component: WelcomePage,
meta: { index: 1, IsAdmin: false, IsStudent: store.getters.IsStudent },

},
],
});

router.beforeEach((to: any, from: any, next: any) => {
debugger;
let IsStudent = store.getters.IsStudent; // store is always undefined here
if (!!IsStudent) {
debugger;
}
if (to.meta.IsAdmin === true && IsStudent === true) {
next({ name: 'WelcomePage' });
} else {
next();
}
});

export default router;


--main.ts



import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store/store';
import './registerServiceWorker';
import VueResource from 'vue-resource';
import Notifications from 'vue-notification';


// Custom Imports Start
import * as jQuery from 'jquery';
const $ = jQuery;
import './assets/css/style.css';
import './assets/js/go-to-up';
import 'bootstrap';
// Custom Imports End


Vue.use(VueResource);
Vue.config.productionTip = false;
Vue.use(Notifications);

export default new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');


--store.ts



import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);

export default new Vuex.Store({
state: {
Languages: ,
IsStudent: false,
},
mutations: {
setLanguages: (state, values) => {
values.forEach((x: any) => {
return x.IsSelected = false;
});
values[0].IsSelected = true;
state.Languages = values;
},
changeLanguages: (state, LCID) => {
state.Languages.forEach((x: any) => {
if (x.LCID === LCID) {
return x.IsSelected = true;
} else {
return x.IsSelected = false;
}
});
},
setIsStudent: (state, value) => {
state.IsStudent = value;
},
},
actions: {
setLanguages: (context, values) => {
context.commit('setLanguages', values);
},
changeLanguages: (context, value) => {
context.commit('changeLanguages', value);
},
setIsStudent: (context, value) => {
context.commit('setIsStudent', value);
},
},
getters: {
selectedLanguage(state) {
const lst = (state.Languages as any).filter(
(l: any) => l.IsSelected === true,
);
if (lst.count > 0) {
return lst[0].LCID;
} else {
return -1;
}
},
IsStudent(state) {
return state.IsStudent;
},
},
});


Thanks in advance for help :) before any route call i want to get role from server and on base of that role i want to apply authentication










share|improve this question























  • Have you figured it out yet? I can access vuex store correctly inside my router.ts.

    – Jeremy Walters
    Jan 8 at 7:03











  • no. can you please share some working code example

    – Muhammad Atif
    Jan 10 at 9:44











  • I am busy looking into more details. One thing though for some reason store would appear undefined if you look at it through devtools. Could you try it like this : const test = store; debugger; . THen check the value of test in your devtools

    – Jeremy Walters
    Jan 10 at 10:50
















0












0








0








i am trying to access vuex store value in router.ts but unable. I have googled it alot but found no stuff. In App.Vue i can access store values using this.$store but not working in .ts files.



--router.ts



import Vue from 'vue';
import Router from 'vue-router';
import StudentList from './views/admin/StudentList.vue';
import Questions from './views/admin/TemplateQuestions.vue';
import WelcomePage from './views/student/WelcomePage.vue';
import store from './store/store';

Vue.use(Router);


const router = new Router({
// mode: 'history',
routes: [
{
path: '/',
name: 'Questons',
component: Questions,
meta: { index: 0, IsAdmin: true},
},
{
path: '/Students',
name: 'StudentList',
component: StudentList,
meta: { index: 1, IsAdmin: true},
},
{
path: '/StudentIntro',
name: 'WelcomePage',
component: WelcomePage,
meta: { index: 1, IsAdmin: false, IsStudent: store.getters.IsStudent },

},
],
});

router.beforeEach((to: any, from: any, next: any) => {
debugger;
let IsStudent = store.getters.IsStudent; // store is always undefined here
if (!!IsStudent) {
debugger;
}
if (to.meta.IsAdmin === true && IsStudent === true) {
next({ name: 'WelcomePage' });
} else {
next();
}
});

export default router;


--main.ts



import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store/store';
import './registerServiceWorker';
import VueResource from 'vue-resource';
import Notifications from 'vue-notification';


// Custom Imports Start
import * as jQuery from 'jquery';
const $ = jQuery;
import './assets/css/style.css';
import './assets/js/go-to-up';
import 'bootstrap';
// Custom Imports End


Vue.use(VueResource);
Vue.config.productionTip = false;
Vue.use(Notifications);

export default new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');


--store.ts



import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);

export default new Vuex.Store({
state: {
Languages: ,
IsStudent: false,
},
mutations: {
setLanguages: (state, values) => {
values.forEach((x: any) => {
return x.IsSelected = false;
});
values[0].IsSelected = true;
state.Languages = values;
},
changeLanguages: (state, LCID) => {
state.Languages.forEach((x: any) => {
if (x.LCID === LCID) {
return x.IsSelected = true;
} else {
return x.IsSelected = false;
}
});
},
setIsStudent: (state, value) => {
state.IsStudent = value;
},
},
actions: {
setLanguages: (context, values) => {
context.commit('setLanguages', values);
},
changeLanguages: (context, value) => {
context.commit('changeLanguages', value);
},
setIsStudent: (context, value) => {
context.commit('setIsStudent', value);
},
},
getters: {
selectedLanguage(state) {
const lst = (state.Languages as any).filter(
(l: any) => l.IsSelected === true,
);
if (lst.count > 0) {
return lst[0].LCID;
} else {
return -1;
}
},
IsStudent(state) {
return state.IsStudent;
},
},
});


Thanks in advance for help :) before any route call i want to get role from server and on base of that role i want to apply authentication










share|improve this question














i am trying to access vuex store value in router.ts but unable. I have googled it alot but found no stuff. In App.Vue i can access store values using this.$store but not working in .ts files.



--router.ts



import Vue from 'vue';
import Router from 'vue-router';
import StudentList from './views/admin/StudentList.vue';
import Questions from './views/admin/TemplateQuestions.vue';
import WelcomePage from './views/student/WelcomePage.vue';
import store from './store/store';

Vue.use(Router);


const router = new Router({
// mode: 'history',
routes: [
{
path: '/',
name: 'Questons',
component: Questions,
meta: { index: 0, IsAdmin: true},
},
{
path: '/Students',
name: 'StudentList',
component: StudentList,
meta: { index: 1, IsAdmin: true},
},
{
path: '/StudentIntro',
name: 'WelcomePage',
component: WelcomePage,
meta: { index: 1, IsAdmin: false, IsStudent: store.getters.IsStudent },

},
],
});

router.beforeEach((to: any, from: any, next: any) => {
debugger;
let IsStudent = store.getters.IsStudent; // store is always undefined here
if (!!IsStudent) {
debugger;
}
if (to.meta.IsAdmin === true && IsStudent === true) {
next({ name: 'WelcomePage' });
} else {
next();
}
});

export default router;


--main.ts



import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store/store';
import './registerServiceWorker';
import VueResource from 'vue-resource';
import Notifications from 'vue-notification';


// Custom Imports Start
import * as jQuery from 'jquery';
const $ = jQuery;
import './assets/css/style.css';
import './assets/js/go-to-up';
import 'bootstrap';
// Custom Imports End


Vue.use(VueResource);
Vue.config.productionTip = false;
Vue.use(Notifications);

export default new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');


--store.ts



import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);

export default new Vuex.Store({
state: {
Languages: ,
IsStudent: false,
},
mutations: {
setLanguages: (state, values) => {
values.forEach((x: any) => {
return x.IsSelected = false;
});
values[0].IsSelected = true;
state.Languages = values;
},
changeLanguages: (state, LCID) => {
state.Languages.forEach((x: any) => {
if (x.LCID === LCID) {
return x.IsSelected = true;
} else {
return x.IsSelected = false;
}
});
},
setIsStudent: (state, value) => {
state.IsStudent = value;
},
},
actions: {
setLanguages: (context, values) => {
context.commit('setLanguages', values);
},
changeLanguages: (context, value) => {
context.commit('changeLanguages', value);
},
setIsStudent: (context, value) => {
context.commit('setIsStudent', value);
},
},
getters: {
selectedLanguage(state) {
const lst = (state.Languages as any).filter(
(l: any) => l.IsSelected === true,
);
if (lst.count > 0) {
return lst[0].LCID;
} else {
return -1;
}
},
IsStudent(state) {
return state.IsStudent;
},
},
});


Thanks in advance for help :) before any route call i want to get role from server and on base of that role i want to apply authentication







typescript vuejs2 vuex






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Jan 2 at 13:49









Muhammad AtifMuhammad Atif

859415




859415













  • Have you figured it out yet? I can access vuex store correctly inside my router.ts.

    – Jeremy Walters
    Jan 8 at 7:03











  • no. can you please share some working code example

    – Muhammad Atif
    Jan 10 at 9:44











  • I am busy looking into more details. One thing though for some reason store would appear undefined if you look at it through devtools. Could you try it like this : const test = store; debugger; . THen check the value of test in your devtools

    – Jeremy Walters
    Jan 10 at 10:50





















  • Have you figured it out yet? I can access vuex store correctly inside my router.ts.

    – Jeremy Walters
    Jan 8 at 7:03











  • no. can you please share some working code example

    – Muhammad Atif
    Jan 10 at 9:44











  • I am busy looking into more details. One thing though for some reason store would appear undefined if you look at it through devtools. Could you try it like this : const test = store; debugger; . THen check the value of test in your devtools

    – Jeremy Walters
    Jan 10 at 10:50



















Have you figured it out yet? I can access vuex store correctly inside my router.ts.

– Jeremy Walters
Jan 8 at 7:03





Have you figured it out yet? I can access vuex store correctly inside my router.ts.

– Jeremy Walters
Jan 8 at 7:03













no. can you please share some working code example

– Muhammad Atif
Jan 10 at 9:44





no. can you please share some working code example

– Muhammad Atif
Jan 10 at 9:44













I am busy looking into more details. One thing though for some reason store would appear undefined if you look at it through devtools. Could you try it like this : const test = store; debugger; . THen check the value of test in your devtools

– Jeremy Walters
Jan 10 at 10:50







I am busy looking into more details. One thing though for some reason store would appear undefined if you look at it through devtools. Could you try it like this : const test = store; debugger; . THen check the value of test in your devtools

– Jeremy Walters
Jan 10 at 10:50














1 Answer
1






active

oldest

votes


















0














My store is an example of mine working. Hope this helps. Although my store look a bit different since I use modules. In this example below I store is defined at router.beforeEach.



src/store/index.ts



import Vue from "vue";
import Vuex from "vuex";
import { user } from "@/store/user";
import { shops } from "@/store/shops";
import { accounts } from "@/store/accounts";

Vue.use(Vuex);

export const store = new Vuex.Store({
modules: {
user,
shops,
accounts
}
});


src/main.ts



import "@babel/polyfill";
import Vue from "vue";
import "./plugins/vuetify";
import App from "./App.vue";
import router from "@/router";
import { store } from "@/store";
import "@/registerServiceWorker";
import VeeValidate from "vee-validate";

Vue.config.productionTip = false;

Vue.use(VeeValidate);

new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");


src/router.ts



import Vue from "vue";
import Router, { Route } from "vue-router";
import { store } from "./store";

Vue.use(Router);

const router = new Router({
mode: "history",
routes: [
{
path: "/",
name: "about",
component: About
}
]
})

router.beforeEach((to: any, from: any, next: any) => {
const test = store;
debugger;
});

export default router;





share|improve this answer























    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%2f54007510%2faccessing-vuex-store-in-router-ts-file%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









    0














    My store is an example of mine working. Hope this helps. Although my store look a bit different since I use modules. In this example below I store is defined at router.beforeEach.



    src/store/index.ts



    import Vue from "vue";
    import Vuex from "vuex";
    import { user } from "@/store/user";
    import { shops } from "@/store/shops";
    import { accounts } from "@/store/accounts";

    Vue.use(Vuex);

    export const store = new Vuex.Store({
    modules: {
    user,
    shops,
    accounts
    }
    });


    src/main.ts



    import "@babel/polyfill";
    import Vue from "vue";
    import "./plugins/vuetify";
    import App from "./App.vue";
    import router from "@/router";
    import { store } from "@/store";
    import "@/registerServiceWorker";
    import VeeValidate from "vee-validate";

    Vue.config.productionTip = false;

    Vue.use(VeeValidate);

    new Vue({
    router,
    store,
    render: h => h(App)
    }).$mount("#app");


    src/router.ts



    import Vue from "vue";
    import Router, { Route } from "vue-router";
    import { store } from "./store";

    Vue.use(Router);

    const router = new Router({
    mode: "history",
    routes: [
    {
    path: "/",
    name: "about",
    component: About
    }
    ]
    })

    router.beforeEach((to: any, from: any, next: any) => {
    const test = store;
    debugger;
    });

    export default router;





    share|improve this answer




























      0














      My store is an example of mine working. Hope this helps. Although my store look a bit different since I use modules. In this example below I store is defined at router.beforeEach.



      src/store/index.ts



      import Vue from "vue";
      import Vuex from "vuex";
      import { user } from "@/store/user";
      import { shops } from "@/store/shops";
      import { accounts } from "@/store/accounts";

      Vue.use(Vuex);

      export const store = new Vuex.Store({
      modules: {
      user,
      shops,
      accounts
      }
      });


      src/main.ts



      import "@babel/polyfill";
      import Vue from "vue";
      import "./plugins/vuetify";
      import App from "./App.vue";
      import router from "@/router";
      import { store } from "@/store";
      import "@/registerServiceWorker";
      import VeeValidate from "vee-validate";

      Vue.config.productionTip = false;

      Vue.use(VeeValidate);

      new Vue({
      router,
      store,
      render: h => h(App)
      }).$mount("#app");


      src/router.ts



      import Vue from "vue";
      import Router, { Route } from "vue-router";
      import { store } from "./store";

      Vue.use(Router);

      const router = new Router({
      mode: "history",
      routes: [
      {
      path: "/",
      name: "about",
      component: About
      }
      ]
      })

      router.beforeEach((to: any, from: any, next: any) => {
      const test = store;
      debugger;
      });

      export default router;





      share|improve this answer


























        0












        0








        0







        My store is an example of mine working. Hope this helps. Although my store look a bit different since I use modules. In this example below I store is defined at router.beforeEach.



        src/store/index.ts



        import Vue from "vue";
        import Vuex from "vuex";
        import { user } from "@/store/user";
        import { shops } from "@/store/shops";
        import { accounts } from "@/store/accounts";

        Vue.use(Vuex);

        export const store = new Vuex.Store({
        modules: {
        user,
        shops,
        accounts
        }
        });


        src/main.ts



        import "@babel/polyfill";
        import Vue from "vue";
        import "./plugins/vuetify";
        import App from "./App.vue";
        import router from "@/router";
        import { store } from "@/store";
        import "@/registerServiceWorker";
        import VeeValidate from "vee-validate";

        Vue.config.productionTip = false;

        Vue.use(VeeValidate);

        new Vue({
        router,
        store,
        render: h => h(App)
        }).$mount("#app");


        src/router.ts



        import Vue from "vue";
        import Router, { Route } from "vue-router";
        import { store } from "./store";

        Vue.use(Router);

        const router = new Router({
        mode: "history",
        routes: [
        {
        path: "/",
        name: "about",
        component: About
        }
        ]
        })

        router.beforeEach((to: any, from: any, next: any) => {
        const test = store;
        debugger;
        });

        export default router;





        share|improve this answer













        My store is an example of mine working. Hope this helps. Although my store look a bit different since I use modules. In this example below I store is defined at router.beforeEach.



        src/store/index.ts



        import Vue from "vue";
        import Vuex from "vuex";
        import { user } from "@/store/user";
        import { shops } from "@/store/shops";
        import { accounts } from "@/store/accounts";

        Vue.use(Vuex);

        export const store = new Vuex.Store({
        modules: {
        user,
        shops,
        accounts
        }
        });


        src/main.ts



        import "@babel/polyfill";
        import Vue from "vue";
        import "./plugins/vuetify";
        import App from "./App.vue";
        import router from "@/router";
        import { store } from "@/store";
        import "@/registerServiceWorker";
        import VeeValidate from "vee-validate";

        Vue.config.productionTip = false;

        Vue.use(VeeValidate);

        new Vue({
        router,
        store,
        render: h => h(App)
        }).$mount("#app");


        src/router.ts



        import Vue from "vue";
        import Router, { Route } from "vue-router";
        import { store } from "./store";

        Vue.use(Router);

        const router = new Router({
        mode: "history",
        routes: [
        {
        path: "/",
        name: "about",
        component: About
        }
        ]
        })

        router.beforeEach((to: any, from: any, next: any) => {
        const test = store;
        debugger;
        });

        export default router;






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 10 at 11:00









        Jeremy WaltersJeremy Walters

        618313




        618313
































            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%2f54007510%2faccessing-vuex-store-in-router-ts-file%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







            Popular posts from this blog

            android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

            SQL update select statement

            'app-layout' is not a known element: how to share Component with different Modules