Accessing Vuex store in router.ts file
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
add a comment |
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
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
add a comment |
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
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
typescript vuejs2 vuex
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
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;
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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;
add a comment |
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;
add a comment |
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;
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;
answered Jan 10 at 11:00
Jeremy WaltersJeremy Walters
618313
618313
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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