[Vuejs]-Websocket within Vuex module: Async issue when trying to use Vuex rootstate

by

0👍

✅

In case somebody have the same problem what I ended up doing is adding a getter to my websocket module:

export const getters = {
    incomingChats: (state) => {
        return state.incomingChatInfo
    },
}

And then using that getter within a computed value in the component I need to populate with the websocket component.

computed: {
    ...mapGetters('websocket', ['incomingChats']),
},

And I use the getter on a regular v-for loop within the component:

<BaseChat
    v-for="(chat, index) in incomingChats"
    :key="index"
    :chat="chat"
    :class="{ 'mt-0': index === 0, 'mt-4': index > 0 }"
/>

That way I don’t have any kind of sync problem with the websocket since I’m sure the getter will bring data to the component before it tries to use it.

Leave a comment