直接访问页面时Vuex State未加载，首次非首页访问userInfo为空问题排查

咱们来一步步拆解你遇到的这个问题：直接访问非首页时userInfo为null，核心是几个细节没处理好，咱们一个个修正：

1. Vuex Action里错误的state访问方式 #

你的fetchUserInfo action里直接用了state.user.loggedIn，但在Vuex的action中，不能直接引用模块外部的state变量，正确做法是从action的context参数里解构出state——不然可能拿到旧的state值，或者在严格模式下直接报错。

修改fetchUserInfo的参数和内部逻辑：

fetchUserInfo ({ commit, state }) { // 从context里解构出state
  if (state.user.loggedIn === true) {
    commit('SET_USER_INFO', null) // 用mutation修改state，别直接赋值state.userInfo = null
    let userRef = null
    const ref = db.collection('Users')
      .where('user_id', '==', state.user.data.uid)
    ref.get().then(function (querySnapshot) {
      // 因为user_id是唯一标识，直接取第一个文档就行，不用forEach循环
      if (!querySnapshot.empty) {
        const doc = querySnapshot.docs[0]
        userRef = doc.data()
        userRef.id = doc.id
      }
    }).then(() => {
      commit('SET_USER_INFO', userRef)
    })
  }
}

2. 违反Vuex规则的直接state修改 #

你在fetchUserInfo里写了state.userInfo = null，这是Vuex的大忌——所有state的修改必须通过mutation。直接修改state不会触发Vue的响应式更新，也没法追踪状态变化，所以一定要换成commit('SET_USER_INFO', null)。

3. 组件渲染时数据未就绪的处理 #

当用户直接访问项目页面时，组件可能在fetchUserInfo的异步请求完成前就渲染了，此时userInfo还是null，自然会报错。你需要在组件里加个加载状态判断：

比如项目页面的模板可以这么写：

<template>
  <div v-if="userInfo">
    <!-- 这里渲染userInfo相关内容 -->
  </div>
  <div v-else>
    <!-- 加载中提示，避免空值报错 -->
    加载用户信息中...
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['userInfo'])
  }
}
</script>

4. 异步逻辑的可读性优化 #

另外，你可以把fetchUserInfo改成async/await写法，代码更清晰，也能避免then链可能带来的时序问题：

async fetchUserInfo ({ commit, state }) {
  if (!state.user.loggedIn) return
  commit('SET_USER_INFO', null)
  try {
    const querySnapshot = await db.collection('Users')
      .where('user_id', '==', state.user.data.uid)
      .get()
    if (!querySnapshot.empty) {
      const doc = querySnapshot.docs[0]
      const userRef = { ...doc.data(), id: doc.id }
      commit('SET_USER_INFO', userRef)
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    // 这里可以加错误提示逻辑，比如给用户弹个提示
  }
}

最后再确认下main.js的初始化逻辑，你的写法是对的——fetchUser是同步action，所以then里调用fetchUserInfo时，state.user已经被正确更新了。

按照上面的修改，应该就能解决直接访问非首页时userInfo为null的问题啦！

内容的提问来源于stack exchange，提问作者KJParker