미들웨어에서 Vuex로 상태가 업데이트되지 않습니까?

미들웨어에서 Vuex로 상태가 업데이트되지 않습니까?

내 상태에 저장될 Firestore 데이터를 가져오려고 하는데 상태에 있는 Vue dev 도구에 표시되지 않습니다.

저장 작업을 통해 얻고 있는 데이터를 콘솔.log()하면 올바른 데이터를 얻고 있음을 알 수 있지만 상태가 업데이트되지 않습니다.

필요한 데이터를 얻기 위해 홈 페이지와 다른 페이지에서 미들웨어를 사용하여 작업을 발송하고 있습니다.

또한 아래 미들웨어 내에서 조건문을 사용하여 파이어스토어 쿼리에 state.user가 필요하기 때문에 다른 상태 변수가 null이 아닐 때만 작업을 디스패치하려고 했습니다.

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

나의

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

가입자: ["noFace2"] 가입: ["noFace3"] 사용자_id: "VbomJvANYDNe3Bek0suySs1L8oy1" 사용자 이름: "noFace1"

내 정보는 돌연변이를 겪고 상태에 전념해야 하지만, 내 상태 값 개발 도구에는 나타나지 않습니다.

 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
  }

변환을 다음으로 변경합니다.

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

이를 통해 Vue의 반응성 시스템이 상태 변수 재할당을 위해 다시 작동할 수 있습니다.

@Alexander의 설명에 따라 다음 항목도 이동해야 합니다.commit()안에서.then()Firebase 쿼리의 비동기성을 고려할 때.

언급URL : https://stackoverflow.com/questions/56365056/middleware-to-vuex-state-not-updating-state