如果直接访问页面，则 VUEX 状态未加载答案

【问题标题】：VUEX state is not loading up if a page is visited directly如果直接访问页面，则 VUEX 状态未加载
【发布时间】：2020-02-28 15:27:49
【问题描述】：

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

现在，我已经从 app.vue 将 VUEX 设置为“fetchUsers”。 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')
  })
})

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

我做错了什么？

【问题讨论】：

可能是因为页面加载时没有获取到用户数据？您似乎只在身份验证状态发生变化时才获取它。
我不确定，因为这些页面都没有获取。但是，一个会检索数据而另一个不会，尽管它们在站点内是相同的“级别”？

标签： vue.js vuex vuex-modules

【解决方案1】：

当用户访问任何其他页面时，onAuthStateChanged 函数将被 firebase 调用，并且您在 onAuthStateChanged 函数中调用了 store.dispatch。您可以通过使用正确的 store 变量来解决此问题。

【讨论】：