Vue.js & vuex 通过服务器端事件处理短信

Question

I have a app, which is basically a Call centrum. You can receive calls, call to someone, receive sms and send sms etc.. I have problem with showing my SMS on screen, when I receive event from backend, I am showing that data on screen using vuex and V-for for specific component. Problem is that when I receive another event from backend with different number, I would like to show it under that first sms, but it will overwrite first sms and show only that new sms. I was trying multiple approaches, but nothing worked for me so I hope someone will be able to show me my mistake.

Here is photo of screen with one sms (red box is where second sms should be with own informations like number...)..

Here is code where I receive events.

export default function setupStream(){
    let evtSource = new EventSource('/hzs/events.sse');
    evtSource.addEventListener('receive_sms', event => {
      let sms_data = JSON.parse(event.data);
      store.dispatch('receiveSMS', sms_data);
    }, false)
}

Here is my vuex code

const state = {
    sms: [],
};

const getters = {
    getSMS: (state) => state.sms,
};

const actions = {
    receiveSMS({ commit }, sms_data) {
        commit('setSMS', sms_data);
    },
};

const mutations = {
    setSMS: (state, sms) => (state.sms = sms),
};

export default {
    state,
    getters,
    actions,
    mutations
}

And here is component.

<template>
      <v-card>
        <v-card-title class="primary white--text">
          {{ $t("Communication") }}
        </v-card-title>
        <v-card d-flex flex-column height="100%" class="card-outter scroll">
          <v-col>
            <div v-for="sms in getSMS" :key="sms.id">
            <v-card-actions>
              <v-row>
                    <v-btn @click="openChat" icon class="mt-4"
                      ><v-img
                        max-width="30px"
                        max-height="30px"
                        class="mt-2"
                        src="@/assets/icons/icon-sms.svg"
                        alt="icon-sms"
                    /></v-btn>
                <v-col>
                  <span>{{sms.date_time}}</span> <br />
                  <h4>{{sms.sender}}</h4>
                  
                    <!-- Dialog for Adding new Note -->
                    <v-dialog
                      v-model="showEditor"
                      max-width="400px"
                      persistent
                      scrollable
                    >
                      <template v-slot:activator="{ on, attrs }">
                        <v-btn
                          @click="showEditor = true"
                          depressed
                          small
                          v-bind="attrs"
                          v-on="on"
                          >{{$t("Add Note")}}</v-btn
                        >
                      </template>
                      <AddNoteDialog v-on:close-card="showEditor = false"
                    /></v-dialog>
                  
                </v-col>
                <v-spacer></v-spacer>
                <v-btn class="mt-5" icon @click="deleteCommunication"
                  ><v-img
                    max-width="20px"
                    src="@/assets/icons/icon-delete.svg"
                    alt="icon-delete"
                /></v-btn>
              </v-row>
            </v-card-actions>
            <v-divider></v-divider>
            </div>
            <v-spacer></v-spacer>
            <v-divider></v-divider>
            <v-card-actions class="card-actions">
              <v-row>
                <v-text-field
                  class="ml-4"
                  color="primary white--text"
                  required
                  :label="$t('Mobile number')"
                  clearable
                ></v-text-field>
                <v-dialog
                      v-model="showEditor1"
                      max-width="450px"
                      persistent
                      scrollable
                    >
                      <template v-slot:activator="{ on, attrs }">
                        <v-btn
                          @click="showEditor1 = true"
                          class="mt-5 mr-4"
                          depressed
                          icon
                          v-bind="attrs"
                          v-on="on"
                          ><v-icon>mdi-plus-circle</v-icon></v-btn
                        >
                      </template>
                      <AddNummberDialog v-on:close-card="showEditor1 = false"
                    /></v-dialog>  
              </v-row>
            </v-card-actions>
          </v-col>
        </v-card>
      </v-card>
</template>

<script>
import AddNoteDialog from "@/components/UI/AddNoteDialog";
import AddNummberDialog from "@/components/UI/AddNummberDialog";
import { mapGetters, mapActions } from 'vuex';

export default {
  name: "Communication",
  data() {
    return {
      dialog: false,
      showEditor: false,
      showEditor1: false,
      note: '',
      chat: this.switchChat,
    };
  },
  computed: {
    ...mapGetters(['getSMS']),
  },
  components: { AddNoteDialog, AddNummberDialog },
  props: ["switchChat"],
  methods: {
    ...mapActions(['setupEvents']),
    openChat() {
      this.$emit('openChat')
    },
    async deleteCommunication() {
      alert("Deleted");
    },
  },
};
</script>

<style>
.scroll {
  overflow-y: scroll;
}
.card-outter {
  padding-bottom: 50px;
}
.card-actions {
  position: absolute;
  bottom: 0;
  width: 100%;
}


</style>

I think that solution is creating new array, where I will store every single SMS that I receive. Problem is that I don't know how and where to do it.

Answer 1

You already have your vue state array called sms which is a good start. You'll need to update your Vuex to have an additional mutation called "addNewSMS" or something:

const mutations = {
    setSMS: (state, sms) => (state.sms = sms),
    addNewSMS: (state, newSMS) => state.sms.push(newSMS),
};

This will update your state.sms array to include more than one element, which you should be able to loop through using a v-for loop in your template.

Of course, you'll also need to update your actions like this:

const actions = {
    receiveSMS({ commit }, sms_data) {
        commit('addNewSMS', sms_data);
    },
};

As a sidenote, I'd personally change the sms variable name to messages so its clearer to you and other coders that it contains multiple objects.