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

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.js文件中

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 status 检查用户是否登录在App.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.js 通用模块

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

Answer 1

在初始导航中，守卫中的登录尚未完成，这就是您在控制台中看不到该值的原因。它仅在登录 store 时出现 true，因为它是在登录后不久设置的，并且当您登录 objects/arrays 然后单击以查看其属性时，控制台会自行更新。

解决竞争条件的一种方法是在登录完成后重定向到主页：

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
  }
})

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

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

在初始加载时，用户将被重定向到登录页面。
登录完成后，他们将被送回主页。

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

How to access store getter updated value from main.js file in vue app?

javascript

vue.js

vue-router

vuex

vuejs2