Question

我目前在检索状态方面遇到问题，具体取决于某人首次访问的页面。

现在，我已经从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为null）即使如此，我也像在主页上一样使用mapGetter来从商店中获取userInfo。

我在做什么错了？

Answer 1

当用户访问任何其他页面时，onAuthStateChanged会调用firebase函数，并且您已经在onAuthStateChanged函数中调用了store.dispatch。您可以使用适当的store变量来解决此问题。

如果直接访问页面，则VUEX状态无法加载

1 个答案: