라우터에 저장하기 위한 액세스

라우터에 저장하기 위한 액세스

Vuex 스토어에서 사용자가 다음을 가지고 있는지 확인하고 싶습니다.'admin'에 들어가기 전의 역할/dashboard루트가 안 돼요. 하지만 전 이 루트의store.getters.

Quasar(Vue.js)와 Vuex + Typescript를 사용합니다.

에서routes.ts파일, 위의beforeEnter()기능, 스토어에서 Getters에 접속할 수 있습니다.console.log(store.myStore.getters)아, 그렇군요.userInfos내부:

나는 왜 내가 단지 단지 그 사람만 가지고 있는지 이해할 수 없다.{}가 아니라{...}(클릭하면 내용이 표시됩니다).

하지만 내가 전화하면console.log(store.myStore.getters.userInfos), 데이터가 표시되지 않습니다.

여기 있습니다index.ts(표준):

import { route } from 'quasar/wrappers'
import VueRouter from 'vue-router'
import { Store } from 'vuex'
import { StateInterface } from '../store'
import routes from './routes'

export default route<Store<StateInterface>>(function ({ Vue }) {
  Vue.use(VueRouter)

  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,

    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })

  return Router
})

여기 있습니다routes.ts(표준):

import { RouteConfig } from 'vue-router'

const routes: RouteConfig[] = [
  {
    path: '/',
    component: () => import('layouts/Login.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      { path: '/inscription', component: () => import('pages/SignUp.vue') },
      { path: '/connexion', component: () => import('pages/SignInPage.vue') }
    ]
  },

  {
    path: '/main',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      { path: '/dashboard', component: () => import('pages/DashboardB2B.vue'),
          beforeEnter: (to, from, next) => {
            const store = require('../store')
            console.log("before enter")
            console.log(store.myStore.getters)
            return next();
        }, },
      {
        path: '/ajouter-un-referentiel',
        component: () => import('pages/ReferentielMetier.vue')
      },
      {
        path: '/init',
        component: () => import('components/bot/BotSkeleton.vue')
      }
    ]
  },
  {
    path: '/bot',
    component: () => import('layouts/Bot.vue'),
    children: [
      {
        path: '/ajouter-un-referentiel',
        component: () => import('pages/ReferentielMetier.vue')
      },
      {
        path: '/init',
        component: () => import('components/bot/BotSkeleton.vue')
      }
    ]
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes

그리고 여기 있다index.ts스토어(Vuex):

import Vue from 'vue'
import { store } from 'quasar/wrappers'
import Vuex from 'vuex'
Vue.use(Vuex)

import matching from './modules/matching'
import orga from './modules/organigrame'
import user from './modules/user'

export interface StateInterface {
  example: unknown
}

let myStore: any

export default store(function({ Vue }) {
  Vue.use(Vuex)

  const Store = new Vuex.Store<StateInterface>({
    modules: {
      matching,
      orga,
      user
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: !!process.env.DEBUGGING
  })

  myStore = Store

  return Store
})

export {myStore}

편집: 제 생각에는console.logGetters가 로드되기 전에 실행됩니다.Vue 개발자 툴을 체크하면 모든 것을 볼 수 있기 때문입니다.매장 자체가 로딩되지 않은 경우 어떻게 매장을 확인할 수 있습니까?beforeEnter기능하고 있습니까?

이렇게 해보세요

store.myStore.getters["userInfos"]

이거 먹어봐

router.beforeEach(async(to, from, next) => {
    const userInfo = await store.getters.userInfos;
    console.log(userInfo);
});

언급URL : https://stackoverflow.com/questions/65144080/accessing-to-store-in-the-router