VueJs(Quasar), 라우터 내 vuex 스토어 액세스

VueJs(Quasar), 라우터 내 vuex 스토어 액세스

Vuex를 배우고 인증 모듈을 만들고 있습니다.튜토리얼을 따라가다 라우터의 스토어를 사용하고 싶은 요점을 알게 되었습니다.라우터 index.js의 상단에 스토어를 Import하고 있습니다만, getters(정의되지 않음)에 액세스 할 수 없기 때문에 스토어를 Import 하고 있지 않은 것 같습니다.

vue 컴포넌트에서는 스토어가 정상적으로 동작합니다.왜 이런 일이 일어나는 거죠?라우터 작성 시 스토어가 올바르게 초기화되지 않았기 때문인가요?잘 작동하는 튜토리얼에 따르면

router/index.displaces

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
import store from '../store'
Vue.use(VueRouter)

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation
 */

export default function(/* { store, ssrContext } */) {
  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,
    // Leave these as is and change from quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE,
  })
  Router.beforeEach((to, from, next) => {
    if(to.matched.some(record => record.meta.requiresAuth)) {

      if (store.getters.isLoggedIn) {
        next()
        return
      }
      next('/login')
    } else {
      next()
    }
  })
  return Router
}

및 store/index.displaces.displaces

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

// import example from './module-example'

Vue.use(Vuex)
/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation
 */
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'


export default function(/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      // example
    },
    namespaced: true,
    getters,
    mutations,
    actions,
    state,
    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEV,
  })

  return Store
}

기본 Quasar 저장소/index.js는 수정할 필요가 없습니다.

Promise 기능으로 사용합니다.

import store from '../store'
....
if (store().getters['auth/isLoggedIn']) {
   next()
   return
}

제가 직접 받아볼게요.저희 가게에는 일반적인 수출 디폴트 스토어가 없습니다.

그래서 아래와 같이 수정했고, 정상적으로 동작합니다.

const store = new Vuex.Store({
  modules: {
   authentication
  },
  namespaced: true,
  strict: process.env.DEV,
})

export default store

2월 22일 24일 현재...

router.display의 선두에 있습니다.

import { useStore } from 'vuex'

다음으로 모듈 기능 내에 있습니다.

const store = useStore()

다음에, 에 액세스 할 수 있습니다.store.state할 수 있다store.commit('ANY_MUTATION',data)기타 등

언급URL : https://stackoverflow.com/questions/58814182/vuejs-quasar-vuex-store-access-in-router