在 router.ts 文件中访问 Vuex 存储

Question

我正在尝试访问 router.ts 中的 vuex 存储值，但无法访问。我用谷歌搜索了很多，但没有发现任何相关内容。在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;
    },
  },
});

在任何路由调用之前，我想从服务器获取角色，并基于该角色应用身份验证。

Answer 1

我的商店是我工作的一个例子。希望这可以帮助。虽然我的商店看起来有点不同，因为我使用了模块。在下面的这个例子中，我的存储定义在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;