Estoy tratando de completar datos usando el estado raíz de un estado proveniente de un websocket en una acción como esta:
export const actions = { fetchChats({ commit, rootState }) { const data = rootState.websocket.incomingChatInfo commit('SET_CHATS', data) }, }La cuestión es que, dado que el módulo websocket es asíncrono, websocket.incomingChats aún no está allí cuando se llama a la acción fetchChats en el método de ciclo creado del componente.
created() { this.$store.dispatch('chatQueue/fetchChats'), null, { root: true } },Esta es la acción asíncrona de la tienda websocket:
export const actions = { processWebsocket({ commit }) { return new Promise((resolve) => { const v = this this.ws = new WebSocket('xyz') this.ws.onopen = function (event) { commit('SET_CONNECTION', event.type) v.ws.send('message') } this.ws.onmessage = function (event) { commit('SET_REMOTE_DATA', event) resolve(event) } this.ws.onerror = function (event) { console.log('webSocket: on error: ', event) } this.ws.onclose = function (event) { console.log('webSocket: on close: ', event) commit('SET_CONNECTION') ws = null setTimeout(startWebsocket, 5000) } }) }, }Y esta es la mutación que se ha llamado cuando se resuelve la promesa:
SET_REMOTE_DATA(state, remoteData) { const wsData = JSON.parse(remoteData.data) if (wsData.connectionId && wsData.connectionId !== state.connectionId) { state.connectionId = wsData.connectionId console.log(`Retrieving Connection ID ${state.connectionId}`) } else { state.messageType = wsData.type state.incomingChatInfo = wsData.documents } },¿Hay alguna manera de hacer que const data = rootState.websocket.incomingChats espere hasta que se resuelva la promesa websocket y esté seguro de que hay datos para obtener del módulo websocket?
Cualquier acción que dependa de processWebsocket debe ocurrir después de su finalización, es decir, debe encadenarse una promesa:
mounted() { await this.$store.dispatch('processWebsocket') await this.$store.dispatch('fetchChats') } Si ocurren en diferentes componentes, un componente que usa fetchChats en el montaje no debe montarse hasta que se complete processWebsocket .
Es un error asignar datos a this , que es una instancia de Vue de la tienda Vuex, no se garantiza que exista y no debe usarse para almacenar datos aleatorios. En su lugar, ws debe confirmarse en la tienda como cualquier otro dato.
puede intentar usar Vuex async y esperar .
export const actions = { async fetchChats({ commit, rootState }) { const data = await rootState.websocket.incomingChatInfo commit('SET_CHATS', data) }, } luego en tu gancho created() .
created() { await this.$store.dispatch('chatQueue/fetchChats'), null, { root: true } }, Probablemente también tenga que agregar async and await a su acción processWebsocket .