我将VueJS与vuex
和vue-router
结合使用.我有一个vuex
模块正在对其存储进行变异,并试图使用它来确定用户是否经过身份验证.
下面是我的代码在相关部分的样子.
main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
router.beforeEach((to, from, next) => {
console.log(router.app) // prints a Vue$2 object
console.log(router.app.$store) // undefined
console.log(store.getters.isAuthenticated) // false
...
}
const app = new Vue({
store,
router,
...App
})
app.$mount('#app')
/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import core from './modules/core'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
core: core
}
})
export default store
/store/modules/core.js
import * as types from '../types'
import api from '../../api'
import router from '../../router'
const state = {
token: null,
user: null,
authenticated: false
}
const mutations = {
[types.LOGIN_SUCCESS] (state, payload) {
console.log('mutate')
state.token = payload.token
state.user = payload.user
state.authenticated = true
router.go('/')
}
}
const getters = {
isAuthenticated: state => {
return state.authenticated
}
}
const actions = {
[types.LOGIN] (context, payload) {
api.getToken(payload).then(response => {
context.commit(types.LOGIN_SUCCESS, response)
})
}
}
export default {
state,
mutations,
actions,
getters
}
当我通过逻辑触发LOGIN
操作时,我可以看到Mutations 正确执行,当我使用Chrome扩展查看core
模块的vuex状态时,user
和authenticated
的状态已经正确Mutations .
QUESTION
似乎路由在.beforeEach
环路中运行时,这个模块还没有加载.这是真的吗?
如果是,关于如何处理这种情况,还有哪些其他建议?