Vuex action在Vue mounted钩子中无法获取userId问题求助

核心原因 #

刷新页面时，Vue实例初始化流程先于Firebase Auth的状态恢复流程。组件mounted/created钩子执行时，Firebase还未完成用户登录状态的验证，导致getUserId Action返回null，触发Firestore的参数错误。而页面内切换时，Auth状态已保存在内存中，无需重新验证，所以能正常获取userId。

解决方案 #

1. 在Auth模块中持久化监听Auth状态 #

修改auth.js的store模块，添加Firebase Auth状态监听，确保userId在Vue实例初始化完成前就已就绪：

// store/auth.js
import firebase from 'firebase/app'
import 'firebase/auth'

const state = {
  userId: null
}

const mutations = {
  SET_USER_ID(state, id) {
    state.userId = id
  }
}

const actions = {
  initAuth({ commit }) {
    return new Promise((resolve) => {
      // 监听Auth状态变化，页面刷新时会自动恢复登录状态
      firebase.auth().onAuthStateChanged(user => {
        if (user) {
          commit('SET_USER_ID', user.uid)
        } else {
          commit('SET_USER_ID', null)
        }
        resolve()
      })
    })
  },
  getUserId({ state }) {
    return state.userId
  }
}

export default {
  state,
  mutations,
  actions
}

然后在Vue项目入口文件（如main.js）中，先等待Auth初始化完成再挂载Vue实例：

// main.js
import store from './store'

async function initApp() {
  await store.dispatch('auth/initAuth')
  new Vue({
    store,
    render: h => h(App)
  }).$mount('#app')
}

initApp()

2. 修改fetchCategories Action，确保拿到有效userId #

在category.js的Action中，增加对userId的校验，确保不为null再执行Firestore查询：

// store/category.js
import db from '@/firebase/db'

const actions = {
  async fetchCategories({ dispatch }) {
    const userId = await dispatch('auth/getUserId')
    if (!userId) {
      throw new Error('用户未登录或Auth状态未就绪')
    }
    const categoriesRef = db.collection('users').doc(userId).collection('categories')
    const snapshot = await categoriesRef.get()
    // 处理查询结果逻辑...
  },
  async updateCategory({ dispatch }, payload) {
    const userId = await dispatch('auth/getUserId')
    if (!userId) {
      throw new Error('用户未登录或Auth状态未就绪')
    }
    const categoryRef = db.collection('users').doc(userId).collection('categories').doc(payload.id)
    await categoryRef.update(payload.data)
  }
}

3. 组件内监听userId状态，就绪后再调用Action #

如果不想修改入口文件初始化流程，可在Categories.vue中通过watch监听store里的userId，当userId不为null时再触发fetchCategories：

<!-- Categories.vue -->
<template>
  <!-- 组件内容 -->
</template>

<script>
export default {
  data() {
    return {
      isAuthReady: false
    }
  },
  computed: {
    userId() {
      return this.$store.state.auth.userId
    }
  },
  watch: {
    userId(newVal) {
      if (newVal && !this.isAuthReady) {
        this.isAuthReady = true
        this.fetchCategories()
      }
    }
  },
  async mounted() {
    // 如果初始化时userId已存在，直接调用
    if (this.userId) {
      await this.fetchCategories()
    }
  },
  methods: {
    async fetchCategories() {
      try {
        await this.$store.dispatch('category/fetchCategories')
      } catch (err) {
        console.error('获取分类失败:', err)
      }
    }
  }
}
</script>

为什么EditCategory.vue的点击事件能正常工作？ #

点击事件触发时，页面已经完成渲染，Firebase Auth的状态恢复流程早已结束，此时调用getUserId能拿到有效的用户ID，所以Firestore查询不会报错。

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