Промежуточное программное обеспечение для состояния Vuex не обновляет состояние?

Question

Я пытаюсь получить данные своего пожарного хранилища, которые я собираюсь сохранить в моем состоянии, но они не отображаются в моих инструментах Vue dev в этом состоянии.

Когда я console.log () получаю данные через действие хранилища, я вижу, что получаю правильные данные, но это не обновит состояние.

Я использую middle-на моей домашней странице и на другой странице для отправки моего действия с целью получения необходимых данных.

Я также использовал условный оператор в промежуточном программном обеспечении ниже, чтобы попытаться отправить действие только тогда, когда мои другие переменные состоянияне равны NULL, потому что для запроса пожарного хранилища требуется 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 для запуска действия, в котором есть запрос пожарного хранилища.

  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)
    }

my

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

подписчики: ["noFace2"] подписки: ["noFace3"] user_id: "VbomJvANYDNe3Bek0suySs1L8oy1" username: "noFace1"

моя информация должна пройти через мутацию и подтвердить состояние, но ононе отображается в моем состоянии. vue dev tools.

 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 откатиться для переназначения переменной состояния.

За @ комментарий Александра, вы также должны переместить commit() внутрь then(), учитывая асинхронный характер запроса Firebase.