Vue.js 如果直接访问页面，则不会加载VUEX状态

我目前在根据某人第一次访问的页面检索状态时遇到问题

现在，我已将VUEX设置为从app.vue“获取用户”。VUEX模块看起来是这样的

import db from '@/firebase/init'

const state = {
  user: {
    loggedIn: false,
    data: null
  },
  userInfo: null
}

const getters = {
  user (state) {
    return state.user
  },
  userInfo (state) {
    return state.userInfo
  }
}

const actions = {
  fetchUser ({ commit }, user) {
    commit('SET_LOGGED_IN', user !== null)
    if (user) {
      commit('SET_USER', {
        email: user.email,
        uid: user.uid
      })
    } else {
      commit('SET_USER', null)
    }
  },
  fetchUserInfo ({ commit }) {
    if (state.user.loggedIn === true) {
      state.userInfo = null
      let userRef = null
      const ref = db.collection('Users')
        .where('user_id', '==', state.user.data.uid)
      ref.get().then(function (querySnapshot) {
        querySnapshot.forEach(function (doc) {
          userRef = doc.data()
          userRef.id = doc.id
        })
      }).then(() => {
        commit('SET_USER_INFO', userRef)
      })
    }
  }
}

const mutations = {
  SET_LOGGED_IN (state, value) {
    state.user.loggedIn = value
  },
  SET_USER (state, data) {
    state.user.data = data
  },
  SET_USER_INFO (state, userRef) {
    state.userInfo = userRef
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

我在main.js中初始化它

firebase.auth().onAuthStateChanged(user => {
  store.dispatch('fetchUser', user).then(() => {
    store.dispatch('fetchUserInfo')
  })
})

如果一个用户访问了我的主页，然后转到了网站的其他地方，那么一切都很好。但是，如果用户访问，比如说“项目页面”，那么它会显示“\u vm.userInfo为空”。（或/还有此.$store.getters.userInfo为空） 尽管如此，我还是像在主页上一样使用mapGetter从商店中获取用户信息

---

我做错了什么？

当用户访问任何其他页面时，

onAuthStateChanged

函数被

firebase

调用，您在

onAuthStateChanged

函数中调用了store.dispatch。您可以通过使用适当的

store

变量来解决此问题。

可能是因为加载页面时未获取用户数据？您似乎只是在身份验证状态更改时才获取它。我不确定，因为这两个页面都无法获取。但是一个会检索数据，而另一个不会，尽管两者在站点中处于相同的“级别”？