vue.js＆amp; Vuex通过服务器端事件处理SMS

Question

我有一个应用程序，基本上是通话中心。您可以接到电话，打电话给某人，接收短信并发送短信等。我在屏幕上显示我的SMS，当我从后端接收事件时，我正在使用VUEX和VOR在屏幕上显示该数据。问题是，当我从后端收到另一个数字的事件时，我想在第一个SMS下显示它，但是它将覆盖第一张短信并仅显示新的SMS。我正在尝试多种方法，但对我没有任何帮助，所以我希望有人能够向我展示我的错误。

...。

这是带有一张短信的屏幕的照片（红色框是第二SMS应该带有自己的信息等信息 nofollow noreferrer“>

这是我接收事件的代码。

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)
}

这是我的VUEX代码

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
}

，这是组件。

<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>

我认为该解决方案正在创建新数组，我将在其中存储我收到的每个SMS。问题是我不知道如何以及在哪里做。

Answer 1

您已经拥有称为sms的VUE状态数组，这是一个很好的开始。您需要更新VUEX以具有一个称为“ AddNewsms”或其他内容的其他突变：

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

这将更新您的state.sms数组以包含多个元素，您应该能够通过该元素来循环使用模板中的v-for循环。

当然，您还需要更新这样的操作：

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

作为旁注，我个人将sms变量名称更改为消息，因此对您和其他包含多个对象的编码器。