如何访问存储getter更新值从main.js文件在vue应用程序?

Question

我试图从main.js文件访问更新的vuex getter，以检查用户是否登录。在此基础上，我带用户登录页面。在main.js文件中，我只是像这样访问存储getter。

var router = new VueRouter({...})
router.beforeEach((to, from, next) => {
console.log(store.getters['general/isUserLoggedIn'])
next()
})

general是模块名。

但是当简单地记录store时，它显示具有更新值的对象。但当记录store.getters['general/isUserLoggedIn']时显示初始状态值。为什么它不提供更新的值。这是正确的做法吗?还是有其他的方法呢?

更多细节store.jsfile

import Vue from 'vue'
import Vuex from 'vuex'
import general from './modules/general'
import other from './modules/other'
Vue.use(Vuex)
export const store = new Vuex.Store({
modules: {
general,
other
},
plugins: [],
strict: process.env.NODE_ENV !== 'production'
})

通过调用API状态检查用户是否登录在应用程序。vue

文件

axios.get('/api/profile').then((response) => {
if (response.data.status === 'success') {
this.setUserLoggedIn(true)
}
})

actions.js通用模块

setUserLoggedIn ({ commit }, data) {
commit(types.SET_USER_LOGGED_IN, data)
}

mutations.jsin general module

const mutations = {
[types.SET_USER_LOGGED_IN](state, data) {
state.isUserLoggedIn = data
}
}

Answer 1

在初始导航中，登录还没有在保护中完成，这就是为什么在控制台中看不到该值的原因。当记录store时，它只出现true，因为它是在日志后不久设置的，当你记录对象/数组，然后单击查看它们的属性时，控制台会更新自己。

修复竞争条件的一种方法是在登录完成后重定向到主页:

axios.get('/api/profile').then((response) => {
if (response.data.status === 'success') {
this.setUserLoggedIn(true)
this.$router.push('/');  // Route to home page once login is complete
}
})

在此之前，如果用户未登录，则重定向到login:

router.beforeEach((to, from, next) => {
const isLoggedIn = store.getters['general/isUserLoggedIn'];
if(!isLoggedIn) {
return next('/login');
}
next()
})

• 初始加载时，用户将被重定向到登录页面。
• 一旦登录完成，它们将被送回主页。