실시간 업데이트를 기다린 후 값을 반환합니다 [Vuex , Firestore ]

실시간 업데이트를 기다린 후 값을 반환합니다 [Vuex , Firestore ]

Firestore 실시간 쿼리에서 데이터를 기다린 후 다른 작업을 수행하려고 합니다.모든 것이 예상대로 작동하며 데이터베이스 방화벽을 개체로 가지고 있지만 반환된 개체에서 예절을 가져오려고 하면 빈 결과가 나타납니다.

Vuex 액션

export const getThreadMembers = async ({ commit,dispatch }, payload) => {
      try {
        let members = {}
        const threadMembersRef = await db.collection('members')
                                  .doc(payload.threadId)

        threadMembersRef.onSnapshot(function(doc) {
          Object.assign(members,doc.data())
        })   
        /*
         * I've tried to add some delay before resolve the promise , i've succeeded to have the properties names of member Object
         *await dispatch('delay', 5000);
         */
        return Promise.resolve(members)
      } catch (error) {
        return  Promise.reject(error)
      }
    }
/*
 * this is a function for test purpose only
 */ 
export const delay = ({commit}) => {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}

컴포넌트 파일

      created () {
        this.getThreadMembers({
          threadId: this.threadId
        }).then(members => {
          // Here the Members value is an object
          //{bUNFP8ylLpSvZVdIUyOypQ9WfMB3: truej9R1VgexbZU2yp5q5icnIcIg5xB3: true__proto__: Object}
          console.log(members)
          // When i've tried to get only the key of members Object is always empty !?
          console.log(Object.getOwnPropertyNames(members))
         //[]length: 0__proto__: Array(0)

        })
      }

질문:.

왜죠Object.getOwnPropertyNames(members)먼저 실행된다.members?

의 작업onSnapshot비동기이지만 현재 처리되지 않기 때문에 나머지 함수는 약속이 해결될 때까지 기다리지 않고 계속됩니다.사용.await이 문제를 해결할 수 있는 한 가지 방법입니다.

    const doc = await threadMembersRef.onSnapshot()
    Object.assign(members,doc.data())

또한 사용할 필요가 없습니다.await에threadMembersRef그건 그냥 참고인만 할당하는 거지 아무 일도 안 하니까요

const threadMembersRef = db.collection('members')
                              .doc(payload.threadId)

언급URL : https://stackoverflow.com/questions/49864686/await-query-realtime-updates-and-then-return-value-vuex-firestore