[Vuejs]-Component to emit event on mapGetters

fetchallMessages calls your server to get the messages, right? that asynchonous process won’T be finshed when the meit is run like that.

If you make sure to return a Promise from that action which resolves after you have added chats, you can do this:

this.$store.dispatch('messages/fetchAllMessages')
  .then(() => {
    this.$emit('set-recipient', this.chats[0]);
  })

If you have trouble returning a Promise from that action, share its implementation and we’ll fix it.

If i understand correctly, you want to execute this.$emit('set-recipient', this.chats[0]); only after chats was initialized.

You have 2 options:

1. don’t use mapGetters for the chats getter, just define the computed yourself:

   computed: {
       ...mapGetters('messages')
       chats(){
           const messages = this.$store.getters.getMessages;
           if (messages.length){
              this.$emit('set-recipient', this.chats[0]);
           }
           return messages;
       }
   }
   

2. Instead of doing it in the component, you can move the logic to the store and emit the event from there when you modify chats