javascript - Vue duplicate object

Question

I have some strange problems with receiving Vue events. I have integrated laravel Echo with Pusher, and I have one laravel controller that insert data in database and run event. When I receive event on front-end, it is showing wrong data, actually always duplicate of the first object, and it's not showing it last, but first. When I refresh page everything looks fine. In Vue devtools says that the problem is with mutation ADD_SERVER, and in state 'adminServers' is duplicating object [0], but I can't figure where I have messed it up. I have allowed Pusher event log into console, and event is totally ok from backend side. So here is little code:

This are actions.js

  ADD_SERVER({commit}, server) {
    Api().post('/admin/server', server).then(res => {
        if (res.data === "Server Added")
          console.log('ADDED')
    }).catch(err => {
        console.log(err)
    })
  },

Those are getters.js

addServer: state => {
    return state.addServer
  },

  adminServers: state => {
      return state.adminServers
  },

Here is the mutation:

ADD_SERVER(state, server) {
    state.adminServers.unshift(server);
  },

The state.js

addServer               : {
          name: '',
          ip: '',
          password: '',
          user: '',
  },
  adminServers            : [],

And finally the main vue file:

<script>
import { mapGetters } from "vuex";
import Administration from "@/http/Administration";

export default {

  computed: {
            ...mapGetters(["adminServers"]),
            ...mapGetters(["addServer"]),
        },

        mounted() {
          window.Echo.channel("addServer").listen(".server-created", (e) => {
            this.$store.commit("ADD_SERVER", e.server);
          });
          this.$store.dispatch("GET_SERVERS");
    }
}

</script>

Is state.adminServers.unshift(server); wrong?

Keep in mind that I'm not adding events from AddServer.vue Component, I'm sending it from postman. ListServers is just listing.

question from:https://stackoverflow.com/questions/65621394/vue-duplicate-object

Answer 1

Waitting for answers