我将 VueJS 与vuex
and结合使用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
操作时,我可以看到突变正确执行,当我使用 Chrome 扩展程序查看我的core
模块的 vuex 状态时,状态user
和authenticated
已经正确突变。
问题
看起来这个模块只是在路由器在.beforeEach
循环中运行时还没有加载。这是真的?
如果是,关于如何处理这种情况还有哪些其他建议?如果没有,我做错了什么?