typescript - 在 router.ts 文件中访问 Vuex 存储
问题描述
我正在尝试访问vuex
router.ts 中的存储值,但无法访问。我用谷歌搜索了很多,但没有发现任何相关的东西。在App.Vue
我可以使用this.$store
但不能在 .ts 文件中访问存储值。
路由器.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;
},
},
});
在进行任何路由调用之前,我想从服务器获取角色,并基于该角色应用身份验证。
解决方案
我的商店是我工作的一个例子。希望这可以帮助。虽然我的商店看起来有点不同,因为我使用了模块。在下面的这个例子中,我存储定义在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/路由器.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;
推荐阅读
- android - 原生移动(iOS / Android)应用程序中的 Unity 集成
- python - Python ping IPv6 主机列表,并随时间制作可访问和不可访问主机的字典
- php - PHP - 引用(&)关联数组的未实例化元素时未引发“未定义索引”通知
- c# - 如何在 xamrin 表单中创建谷歌地图弹出窗口
- react-native - ScrollView 内的 FlatList 不滚动
- c - \\\ 只打印一个反斜杠?
- sleep - 在 mshta.exe 单行中使用 WScript.Sleep() 或替换
- angular - 如何在 Angular 5 中定义数组数据类型
- java - Jetty 读取 HTTP 请求
- jquery - 按钮onClick jquery在Safari,iPhone中不起作用