Vuex状态的中间件不更新状态？

Question

我正在尝试获取要存储在我所在州的 Firestore 数据，但它没有显示在我所在州的 Vue 开发工具中。

当我 console.log() 通过 store 操作获得的数据时，我可以看到我获得了正确的数据，但它不会更新状态。

我在主页和另一个页面上使用中间件来调度我的操作以获取所需的数据。

我还在下面的中间件中使用了条件语句来尝试仅在我的其他状态变量不为空时调度操作，因为 firestore 查询需要 state.user

//this is check-auth middleware
 export default function(context) {
 // in initAuth we are forwarding it the req
  context.store.dispatch('initAuth', context.req)
  console.log('WE ARE GRABBING USER INFO')
  context.store.dispatch('grabUserInfo', context.req)
  console.log('There is already user info there')
  // context.store.dispatch('currentUser')
   }

我们正在调度 grabUserInfo 以运行其中包含 firestore 查询的操作。

  grabUserInfo(vuexContext, context) {
     let userInfo = []
     var userRef = db.collection('users')
      var query = userRef
        .where('user_id', '==', vuexContext.state.user)
        .get()
        .then(querySnapshot => {
          querySnapshot.forEach(doc => {
          console.log(doc.data())
          userInfo.push(doc.data())
          })
        })
      vuexContext.commit('setUserInfoSub', userInfo)
    }

我的

   console.log(doc.data()) is showing 

订阅者：["noFace2"] 订阅：[“noFace3”] user_id：“VbomJvANYDNe3Bek0suySs1L8oy1” 用户名：“noFace1”

我的信息应该经过突变并提交到状态，但它没有显示在我的状态 vue 开发工具中。

 setUserInfoSub(state, payload) {
    state.userInfoSub = payload
  }

我不明白数据为什么没有在我的状态下结束。这是我的状态和突变。

  const createStore = () => {
   return new Vuex.Store({
    state: {
     loadedCards: [],
     user: null,
     username: null,
     userInfoSub: [],
     token: null
   },
    mutations: {
    setCards(state, cards) {
    state.loadedCards = cards
    },
    setUser(state, payload) {
    state.user = payload
    },
     setUsername(state, payload) {
     state.username = payload
    },
    setUserInfoSub(state, payload) {
    state.userInfoSub = payload
    },
    setToken(state, token) {
    state.token = token
  }

Answer 1

将您的突变更改为：

 setUserInfoSub(state, payload) {
    Vue.set(state, 'userInfoSub', payload);
    }

这将允许 Vue 的反应系统重新启动状态变量重新分配。

根据 @Alexander 的评论，鉴于 Firebase 查询的异步性质，您还应该将 commit() 移动到 then() 中。